Pro Sites pricing tables responsive CSS

On this page, there are Pro Sites pricing tables: https://***.co/register/?action=new_blog They've been styled a bit during one of the live chats in the past. Today the other issue was fixed which prevented the entire site from scaling down on screens below 768px wide.

Before it was fixed pricing tables couldn't scale below that point and they looked fine but now they can scale down beyond 768px and need a bit more styling. Please assist.

  • Predrag Dubajic

    Hi Winston,

    Hope you're doing well.

    The CSS that messes up the site is the width of your free plan and login buttons which forces the width to 800 pixels, this is the code I'm referring to:

    .login-existing {
        text-align: center;
        margin: 0 auto !important;
        width: 800px !important;
    ...
    
    #prosites-checkout-table .free-plan-link {
        text-align: center;
        margin: 0 auto !important;
        width: 800px !important;
    ...

    You should limit max width to both of those and that should do the trick, you can do that by adding this for both selectors:
    max-width: 100%;

    And you can also try applying this in order to make your columns full width on smaller screens:

    @media screen and (max-width: 768px) {
    	#prosites-checkout-table .pricing-column {
    	    width: 100%!important;
    	}
    }

    Best regards,
    Predrag