One column pricing tables don’t appear correctly on phone view

Hi Faye,

You have to edit CSS to overcome this issue. Open your theme’s style.css file and paste the following CSS code at the end of the file:

@media only screen and (max-width : 479px) {
div.wrc_pricing_table h1 span.plan {font-size: 10px}
div.wrc_pricing_table div.package_details div.ribbon-content {font-size: 8px}
}

Hopefully, it will solve your issue.

Thanks
Iftekhar

Hi

Thank you for coming back to me. It has somewhat fixed the issue, but not completely. This is what it looks like now – remember to view on a phone….

https://www.yolk-marketing.co.uk/yolk-prices/

Faye

Hi,

Try to also add the following CSS code in between @media only screen and (max-width : 479px):

div.wrc_pricing_table div.package_details li.feature_style_1 {height: 48px;line-height: 48px}

Thanks

• This reply was modified 7 years, 9 months ago by Moviehour.

Hi, thank you, I am not sure that works. Perhaps I am adding it incorrectly? Please could you send me the code as a whole so I can replace it completely with what I put in first time around?

The whole code should be like this:

@media only screen and (max-width : 479px) {
div.wrc_pricing_table h1 span.plan {font-size: 10px}
div.wrc_pricing_table div.package_details div.ribbon-content {font-size: 8px}
div.wrc_pricing_table div.package_details li.feature_style_1 {height: 48px;line-height: 48px}
}

Thanks

Thank you for this, I have added it and there is still a slight issue on the phone view.

In the 2nd from bottom (yellow) price box, the ribbon overlaps the name of the package.

You can easily adjust the position of the ribbon. Open wrcpt-front.css file and find:

div.wrc_pricing_table div.package_details li.ribbon

increase or decrease the value of top to adjust the ribbon position.

Hi

Where do I find wrcpt-front.css file please? I am going round in circles.

You will find wrcpt-front.css file under CSS folder.

Thanks

I can’t see CSS folder anywhere? Is it on the left hand side word press menu? I have looked in each menu category and cannot find it. Is it in the pricing tables plug in? Please can you be more specific? I am not an experienced web designer so baby steps are needed.

Thanks

Yes, you will find it in the pricing tables plugin. From your WP admin, go to Plugins menu and find WordPress Responsive CSS3 Pricing Tables there. Click on Edit below the plugin name. You will get wrcpt-front.css file at the right side under Plugin Files.

Thanks