Pricing Table is NOT Mobile friendly / Responsive

Hi, I've check the pricing table on the different size of screen and different device. And found out that the table is not responsive.

Is there any way to make it responsive?
Can I do a custom pricing table?

Please direct me on how to do this.
Appreciate your help

  • Predrag Dubajic
    • Support

    Hi @Team Support,

    There might be few tweaks needed to get the pricing tables work on mobile devices, it's different from theme to theme.
    Here is a CSS you can use to make it look better on smaller screens:

    @media screen and (max-width: 569px) {
    	#prosites-checkout-table .pricing-column {
    	    width: 100%!important;
    	}
    
    	.free-plan-link a {
    		display: block;
    	}
    }

    You can use Upfront global CSS to add that code.

    Let me know if that will work for you.

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Hi @Team Support,

    I see some visual issues from 570 to 809 screen size, could you try adding this CSS code and see if that will work:

    @media only screen and (min-width:570px) and (max-width: 809px)  {
    	.pricing-column .summary .price {
    		margin: 0px auto -40px;
    	    padding: 20px 0 10px;
    	    top: -45px;
    	}
    }

    If you see any other issues could you please attach screenshots?

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.