Pricing Tables – Responsive Display on Mobile

[simongreenland]

Hi

The theme is displaying very well but I am having a problem with the pricing tables on mobile.

I have 4 columns that should stack one above each other on a mobile display (portrait) but instead are squeezing 2 to a row where there is obviously not enough space.

All content is within the pricing column – there isn’t a caption column on the left.

Any ideas?

Many thanks, Si

[Mohammad – SUPPORT]

Hi,
Please use this custom css code :

@media only screen and (max-width: 767px) {
.pricing-table-price{font-size:18px}
.pricing-table-package{font-size:15px}
 .pricing-table-column{width:24.9%}
.pricing-table-details {font-size: 12px;padding: 20px 2px;}
}
@media only screen and (max-width: 479px) {
.pricing-table-price{font-size:15px}
.pricing-table-package{font-size:14px}
 .pricing-table-column{width:24.9%}
.pricing-table-details {font-size: 11px;padding: 20px 2px;}
}

Hope that should work and let me know your feedback.

Thanks 🙂
With Best Regards
Swift Ideas

[simongreenland]

Hi

I’ve dropped that in but no luck I’m afraid.

http://lovelois.com.au/wordpress/organic-plans/

Any other ideas?

Thanks, Si

[Mohammad – SUPPORT]

Hi,
Please remove current one code and use code of this previous reply because i have corrected it.

Thanks 🙂
With Best Regards
Swift Ideas

[simongreenland]

Sorry, that hasn’t fixed it either.

Just to clarify, each pricing column needs to stack in a single column on mobile. It’s currently 2 columns across.

http://lovelois.com.au/wordpress/organic-plans/

Thanks, Si

[Mohammad – SUPPORT]

Hi,
Please use this one code only :

@media only screen and (max-width: 479px) {
.columns-4 .pricing-table-column { margin-bottom: 10px;width: 100%;}
}

Thanks 🙂
With Best Regards
Swift Ideas

[wytanj]

Hi Admin,

Doesn’t work for me as well!

[Rui Guerreiro – SUPPORT]

Hi,

can you provide the url to your pricing page?

-Rui