On a site I am building, I imported a responsive CSS pricing table. Its great and works well but there seems to be a 40px padding on the left margin so the bottom border doesn't go across the whole table in the feature section. I've tweaked the css and used firebug to try and change other css settings but no luck. Interestingly, Firebug shows the purple padding for the over table as well as the feature list but not the table headings.
I just can't find the code or setting that is causing this padding issue. I really need the text and border to go across the whole column.
I've spent 4 hours trying to troubleshoot and now frustrated and need help (I like figuring out myself > how I learn)!
CSS and HTML code below - but because of the size limitations on posting I am sure I probably missing some of the parent settings that affect the table. Can't post screenshots since a newbie but Firebug in Forefox clearly shows the extra padding (purple) on side of the feature list as well as entire table.
Please excuse any etiquette or nomenclature mistakes - I am new to all of this > learning HTML and CSS by myself. Thanks in advance!
Page/site: www.realatize.com/plans.html
CSS of the table:
/******Tables*******/
/*----------
Blocks
----------*/
/*Pricing table and price blocks*/
.pricing_table {
line-height: 150%;
font-size: 12px;
margin: 0 auto;
width: 100%;
max-width: 940px;
padding-top: 10px;
margin-top: 100px;
}
.price_block {
text-align: center;
width: 100%;
color: #fff;
float: left;
list-style-type: none;
transition: all 0.25s;
position: relative;
box-sizing: border-box;
margin-bottom: 10px;
border-bottom: 1px solid transparent;
}
/*Price heads*/
.pricing_table h3 {
text-transform: uppercase;
padding: 8px 0;
background: #333;
margin: -10px 0 1px 0;
}
/*Price tags*/
.price {
display: table;
background: #444;
width: 100%;
height: 70px;
}
.price_figure {
font-size: 24px;
text-transform: uppercase;
vertical-align: middle;
display: table-cell;
}
.price_number {
font-weight: bold;
display: block;
}
.price_tenure {
font-size: 11px;
}
/*Features*/
.features {
background: #E5E5E5;
color: #000;
}
.features li {
padding: 15px 15px 10px 2px;
border-bottom: 1px solid #ccc;
font-size: 12px;
list-style-type: none;
}
.footer {
padding: 25px;
background: #E5E5E5;
}
.action_button {
text-decoration: none;
color: #fff;
font-weight: bold;
border-radius: 5px;
background: linear-gradient(#666, #333);
padding: 8px 20px;
font-size: 11px;
text-transform: uppercase;
}
.price_block:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
transform: scale(1.04) translateY(-5px);
z-index: 1;
border-bottom: 0 none;
}
.price_block:hover .price {
background:linear-gradient(#DB7224, #F9B84A);
box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
background: #222;
}
.price_block:hover .action_button {
background: linear-gradient(#F9B84A, #DB7224);
}
@media only screen and (min-width : 480px) and (max-width : 768px) {
.price_block {width: 50%;}
.price_block:nth-child(odd) {border-right: 1px solid transparent;}
.price_block:nth-child(3) {clear: both;}
.price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
.price_block {width: 20%;}
.price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
.price_block:last-child {border-right: 0 none;}
.price_block:hover {border: 0 none;}
}
.skeleton, .skeleton ul, .skeleton li, .skeleton div, .skeleton h3, .skeleton span, .skeleton p {
border: 5px solid rgba(255, 255, 255, 0.9);
border-radius: 5px;
margin: 7px !important;
background: rgba(0, 0, 0, 0.05) !important;
padding: 0 !important;
text-align: left !important;
display: block !important;
width: auto !important;
height: auto !important;
font-size: 10px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: black !important;
}
.skeleton .label {
font-size: 11px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: white !important;
border: 0 none !important;
padding: 5px !important;
margin: 0 !important;
float: none !important;
text-align: left !important;
text-shadow: 0 0 1px white;
background: none !important;
}
.skeleton {
display: none !important;
margin: 100px !important;
clear: both;
}
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<link rel="stylesheet" href="/files/theme/animate.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400italic,300italic' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="/files/theme/jquery.scrollTo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 350) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
</head>
<body class=' wsite-theme-light'>
<div class="section header">
<div class="w-container-top">
<div class="w-row">
<div class="w-col w-col-4 company-column">
<div class="company-title animated fadeInDown">{logo}</div>
</div>
<div class="w-col w-col-8 nav-bar">
<div id="nav">{menu}</div>
</div>
</div>
</div>
</div>
<div>
<div style="min-height: 260px; padding-top: 80px;" class="content-bg">
<div class="w-container-top">
<h1 style="font-size: 22px;">{content-bg:text global="false"}</h1><br/>
<div class="subtitle">{subtitle:text global="false"}</div>
</div>
</div>
</div>
<div class="section">
<div class="w-container">
<div class="w-row">
<div class="w-col w-col-12">{col-full:content global="false"}</div>
</div>
</div>
</div>
<ul class="pricing_table">
<li class="price_block">
<h3>Listing DIY</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$299</span>
</div>
</div>
<ul class="features">
<li>1GB Storage</li>
<li>2 Clients</li>
<li>5 Active Projects</li>
<li>5 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Listing MLS</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$499</span>
</div>
</div>
<ul class="features">
<li>2GB Storage</li>
<li>5 Clients</li>
<li>10 Active Projects</li>
<li>10 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Pro</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$999</span>
</div>
</div>
<ul class="features">
<li>5GB Storage</li>
<li>10 Clients</li>
<li>20 Active Projects</li>
<li>20 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Premium</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$1999</span>
</div>
</div>
<ul class="features">
<li>Unlimited Storage</li>
<li>Unlimited Clients</li>
<li>Unlimited Projects</li>
<li>Unlimited Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Elite</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$4999</span>
</div>
</div>
<ul class="features">
<li>1GB Storage</li>
<li>2 Clients</li>
<li>5 Active Projects</li>
<li>5 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
</ul>
<ul class="skeleton pricing_table" style="margin-top: 100px; overflow: hidden;">
<li class="label" style="margin: 0 none;">ul.pricing_table</li>
<li class="price_block">
<span class="label">li.price_block</span>
<h3><span class="label">h3</span></h3>
<div class="price">
<span class="label">div.price</span>
<div class="price_figure">
<span class="label">div.price_figure</span>
<span class="price_number">
<span class="label">span.price_number</span>
</span>
<span class="price_tenure">
<span class="label">span.price_tenure</span>
</span>
</div>
</div>
<ul class="features">
<li class="label">ul.features</li>
<br /><br /><br />
</ul>
<div class="footer">
<span class="label">div.footer</span>
</div>
</li>
<li class="price_block" style="opacity: 0.5;">
<span class="label">li.price_block</span>
<h3><span class="label">h3</span></h3>
<div class="price">
<span class="label">div.price</span>
<div class="price_figure">
<span class="label">div.price_figure</span>
<span class="price_number">
<span class="label">span.price_number</span>
</span>
<span class="price_tenure">
<span class="label">span.price_tenure</span>
</span>
</div>
</div>
<ul class="features">
<li class="label">ul.features</li>
<br /><br /><br />
</ul>
<div class="footer">
<span class="label">div.footer</span>
</div>
</li>
<li class="price_block" style="opacity: 0.25;">
<span class="label">li.price_block</span>
<h3><span class="label">h3</span></h3>
<div class="price">
<span class="label">div.price</span>
<div class="price_figure">
<span class="label">div.price_figure</span>
<span class="price_number">
<span class="label">span.price_number</span>
</span>
<span class="price_tenure">
<span class="label">span.price_tenure</span>
</span>
</div>
</div>
<ul class="features">
<li class="label">ul.features</li>
<br /><br /><br />
</ul>
<div class="footer">
<span class="label">div.footer</span>
</div>
</li>
</ul>
<script src="/files/theme/prefixfree.min.js" type="text/javascript"></script>
<div class="section">
<div class="w-container">
<div class="w-row">
<div class="w-col w-col-3">{col-3-first:content global="false"}</div>
<div class="w-col w-col-3">{col-3-second:content global="false"}</div>
<div class="w-col w-col-3">{col-3-third:content global="false"}</div>
<div class="w-col w-col-3">{col-3-fourth:content global="false"}</div>
</div>
</div>
</div>
<div class="section bottom">
<div class="w-container">
<div class="w-row secondary-row">
<div class="w-col w-col-4">{col-tenth:content}</div>
<div class="w-col w-col-4">{col-eleventh:content}</div>
<div class="w-col w-col-2">{col-twelvth:content}</div>
<div class="w-col w-col-2">{col-thirteenth:content}</div>
<div style='padding: 20px 20px 0px 20px; width:100%; text-align:center;'>{bottom}</div>
</div>
</div>
</div>
<div style='display:none'>{content}</div>
<a href="#" class="scrollup">Scroll</a>
</body>
</html>
<div id="footer">
<div id="footer-content">
<div style="visibility:hidden">
{footer}</div>
Site I got the free CSS table / source: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/build-a-responsive-pricing-table-with-neat-hover-states/
It looks like you need ul.features { padding: 0; }. Are you using a CSS reset of some sort? That is ideally the solution here.