Agency Pro – issues with pricing table from Centric

[marcomancosu]

Hi,

I'm trying to integrate the pricing table from the Centric theme in my website http://www.digitalmarketingservices.ie, which is now using the theme Agency Pro (this website is new and in progress, so please do not mind all its issues).

I was able to get the table and to format it using the css, but I see a big problem: the pricing table is not responsive, in particular on mobile screens.

The table is visible in this post: http://www.digitalmarketingservices.ie/web-design/

This is what I did:
1) I added the following code to my style.css (I copied this exact code from the style.css file of the Centric theme):

.pricing-table {
	color: #2e2f33;
	line-height: 1;
	text-align: center;
}

.pricing-table .one-third {
	background-color: #fff;
	border: 2px solid #000;
	margin: 0 -2px;
	padding: 40px;
}

.pricing-table .one-third:nth-child(3n+1) {
	clear: both;
	margin: 20px 0 20px 2.564102564102564%;
}

.pricing-table .one-third:nth-child(3n+3) {
	margin: 20px 2.564102564102564% 20px 0;
}

.pricing-table .price-heading {
	border-bottom: 2px solid #2e2f33;
	margin: -40px -40px 40px;
	padding: 40px;
}

.pricing-table .price-title {
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.pricing-table .price {
	text-transform: uppercase;
}

.pricing-table .amt {
	font-size: 80px;
	line-height: 0.8;
}

.pricing-table .sup {
	vertical-align: top;
	font-weight: 700;
}

.pricing-table .sub {
	vertical-align: bottom;
	letter-spacing: 2px;
	font-weight: 700;
}

.pricing-table ul {
	margin-bottom: 30px;
}

.pricing-table li {
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

I also added this to the "@media only screen and (max-width:782px) {" section of my style.css file:

	.pricing-table .one-third,
	.pricing-table .one-third:nth-child(3n+1),
	.pricing-table .one-third:nth-child(3n+3) {
		margin: 0;
	}

as this was the place where the above lines were in the Centric style.css file.

2) Then, I added this code to my post:

<div class="pricing-table">
<div class="one-third first">
<div class="price-heading">
<h4 class="price-title">WEBDESIGN BASIC</h4>
<div class="price">
<span class="sup"> from €</span>
<span class="amt">123</span></div>
</div>
<ul>
	<li>Premium Genesis theme included</li>
	<li>3-5 pages</li>
	<li>add on SEO start up package</li>
</ul>
<a class="button" href="http://www.digitalmarketingservices.ie/contact/">Get
Webdesign Basic</a>

</div>
<div class="one-third">
<div class="price-heading">
<h4 class="price-title">WEBDESIGN PRO</h4>
<div class="price"><span class="sup">€</span>
<span class="amt">456</span></div>
</div>
<ul>
	<li>Premium Genesis theme included</li>
	<li>5-20 pages</li>
	<li>SEO start up package included</li>
</ul>
<a class="button" href="http://www.digitalmarketingservices.ie/contact/">Get
Webdesign Pro</a>

</div>
<div class="one-third">
<div class="price-heading">
<h4 class="price-title">WEBDESIGN ECOMMERCE</h4>
<div class="price"><span class="sup">€</span>
<span class="amt">789</span></div>
</div>
<ul>
	<li>Full eCommerce website</li>
	<li>5-20 pages</li>
	<li>SEO start up package included</li>
</ul>
<a class="button" href="http://www.digitalmarketingservices.ie/contact/">Get
Webdesign eCommerce</a>

</div>
</div>

I got this code from the Centric setup page: http://my.studiopress.com/setup/centric-pro-theme/, in How to Configure the Home Section 4 Widget Area.

Could you please help me to understand how to make the table responsive?
Thanks a lot

[marcomancosu]

I'm not sure why, but I restored the original style.css file, re-added the pricing table style from Centric, and now the pricing table is responsive. I guess there were mistakes in the style.css I was working on.

[Author]

Posts