Home / Forums / You Theme Support / Can I stop Ultimate Pricing Table being responsive?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Barnaby Aldrick
    Barnaby Aldrick
    Participant

    Hi guys,

    I’m using your excellent Ultimate Pricing Table to put together package prices (at the very bottom of the pricing page on my site at http://www.barnabyaldrick.com/WP-BAWP/pricing). They look great on a desktop, but when viewed on tablets/smartphones, they split into separate columns, with no padding between them. This makes them difficult to differentiate between, so I’ve resorted to doing a screen grab of the desktop columned table and just inserting the image of the table (but functionality is lost and text gets fuzzy).

    So a few questions arise:

    1/ Can I stop these pricing tables from being responsive, ie. there’ll always be three columns even viewed on smaller screens?
    2/ How do I define padding between the top / bottom of columns when these tables split up into separate single blocks on smaller devices?

    Cheers in advance!

    Hi @barnabyaldrick

    The tables will look really squished on mobile screen, so it is not recommended to lose its responsiveness.

    If your only issue is the space between the tables, the padding/margin can be added via Row Settings or via CSS. Please send over your site’s URL so I can give you the CSS to add the spacing on mobile.

    Thanks!

    Barnaby Aldrick
    Barnaby Aldrick
    Participant
    This reply has been marked as private.

    Hi @barnabyaldrick

    Copy and paste this CSS into Theme Options > Custom CSS

    
    @media only screen and (device-width: 768px), only screen and (max-width: 768px) {
    .themeva_pricing_table .pricing-plan.group.custom {
        margin-bottom: 50px;
    }
    }

    This will add a separation at the bottom of each table.

    Regards,

    Barnaby Aldrick
    Barnaby Aldrick
    Participant

    Hey guys! Thanks for taking the time to look, but your CSS doesn’t seem to be creating a gap between columns, when they responsively break into one long line on iPhone screens. Does your CSS code just add a separation at the very bottom of the entire table? As opposed to between each column when they resize?

    Any chance you could have another look please? If I can’t have all columns no one block. I’m hoping to make the separate columns stand apart on smartphone screens so they stand apart with a little padding.

    Cheers in advance!
    Barnaby

    Hi @barnabyaldrick

    I do not see the CSS I sent added to the theme. I added another CSS and there is now a separation between each column.

    Can you please check if it looks good from your end now?

    Thanks!

    Barnaby Aldrick
    Barnaby Aldrick
    Participant

    Cheers for adding in the CSS to add a margin-bottom to break up the pricing table. It was this in case anyone wants it it’s this:

    .pricing-plan.group.orange.vc_col-sm-4 {
    margin-bottom: 50px;
    }

    However, they seem to work for one table but not the album pricing table below. Is there any CSS that can affect all mobile site tables?

    Cheers in advance, Barnaby

    Hi @barnabyaldrick

    Use this CSS to apply it for every pricing table you are using and replace the CSS I sent:

    .pricing-plan.group {
    margin-bottom: 50px;
    }

    Thanks!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.