Get the price table in Pro site be more responsive

If you look at this site form an mobile and tablet

https://simplylearn.no/funksjoner-og-priser/?action=new_blog
http://screencast.com/t/uyvFTL97OfN
http://responsivetest.net/#u=https://simplylearn.no/funksjoner-og-priser/?action=new_blog|640|1136|2

It look crazy bad.... How can we make this tablet more mobile friendly?

https://simplylearn.no/wp-admin/network/admin.php?page=psts-pricing-settings&tab=pricing_style

  • Adam Czajczyk
    • Support Gorilla

    Hello morfjord,

    I hope you're well today and thank you for your question!

    This can be improved with some CSS and I'll be happy to help you with that. Since the CSS would be a bit more complex than just a few lines of basic rules it would be best if I could work with the same theme that you are using. I found out that you are using a child theme of a CoursePress theme so would you mind sharing your child-theme with me (if a parent theme has not been modified)?

    You could .zip it and put on any file storage service (e.g. Dropbox or similar) and share a download link with me here. If you are using any specific/additional CSS for Pro Sites (that are not added in child theme style.css file) please share them with me to.

    I will then install the theme on my test setup and work on the CSS to make these tables better behaving on mobiles.

    Best regards,
    Adam

  • Predrag Dubajic
    • Support

    Hi morfjord,

    Styles can be added in Pro Sites custom fields as well but since you're already adding some CSS rules in child themes it might be best continuing adding the code there.

    Could you try adding below CSS code and see if it looks good after that:

    @media only screen and (min-device-width : 579px) and (max-device-width : 960px) {
        .page-id-25 .entry-content {
            margin: 0!important;
        }
    
        ul.pricing-column.psts-level-3.featured {
            width: 30% !important;
        }
    
        .pricing-column {
            width: 30% !important;
        }
    }
    
    @media only screen and (max-device-width : 579px) {
        ul.pricing-column.psts-level-3.featured {
            width: 100% !important;
        }
    
        .pricing-column {
            width: 100% !important;
        }
    }

    Best regards,
    Predrag

  • Dimitris
    • Support Star

    Hey there morfjord,

    hope you're doing good and don't mind me chiming in! :slight_smile:

    how do I get the fonts/headlines to scale?

    Based on Predrag's snippet, you should be able to set those for tablet and mobile views.
    Here's a *new* version with these additions (feel free to change "14px" size to fit your needs):

    /* WPMUDEV support - start */
    @media only screen and (min-device-width : 579px) and (max-device-width : 960px) {
        .page-id-25 .entry-content {
            margin: 0!important;
        }
    
        ul.pricing-column.psts-level-3.featured {
            width: 30% !important;
        }
    
        .pricing-column {
            width: 30% !important;
        }
    
        .pricing-column .title {
            font-size: 14px !important;
        }
    
    }
    
    @media only screen and (max-device-width : 579px) {
        ul.pricing-column.psts-level-3.featured {
            width: 100% !important;
        }
    
        .pricing-column {
            width: 100% !important;
        }
    
        .pricing-column .title {
            font-size: 14px !important;
        }
    
    }
    /* WPMUDEV support - end */

    Take care,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.