Responsive Site is a mess.

[zharris14]

Our website is a complete mess when on other devices(responsive). The pricing tables are destroyed and our social media page isn’t formatted correctly. What can I do to fix this problem? I will send site link in private comment.

[Ernesto]

Hi, could you send us a link or a temp user to your webpage so we can inspect the issue?

[zharris14]

This reply has been marked as private.

[Ernesto]

Hi! In order to get the pricing plans working in a responsive way you’ll need to go to your Custom CSS Section in your Theme Options Panel and enter the following codes:

div.purchase a.button.default {width: auto;}
.pricing-table .pricing-plan {height: auto!important;}
.pricing-table .purchase {position: static;}
.pricing-table .threecol {width: 23%;}

For the Social Media Page, you’ll need to set the sixcol with a width and auto margin insted of using padding left/right.

It’ll look like this:
<div style="margin: auto;width: 75%;">

Let us know if that worked out for you!

[zharris14]

What if we made a custom pricing table? How would we make that responsive?

[zharris14]

Also, if you click on the Learn More button it jumps to the pricing table, is there anyway we can make that scroll smooth like the rest of the theme? Sorry for all the questions, and I really appreciate all of your help!

[Ernesto]

Hi, in order to make any element responsive you’ll need to set (throught CSS coding) the position as static and define its width/height using percentages. For example:

.custompricingtable {position: static;
width: 100%
height100%}

For the “Learn more” button, you’ll need to go to the file js/main.js, and in line #140, you’ll find this code:

$('#primary-menu > ul > li > a[href*=#]').smoothScroll(
And you’ll need to replace it with:

$('a[href*=#]').smoothScroll(

Let me know if you have any further questions!

[Author]

Posts