Pro Site is not Mobile Responsive!

Hello,

I have a multisite website that I'm working on. I'm an avid user of Divi.

Anyone out there using Divi with pro-sites? There's not enough examples out there to showcase pro-sites. Please don't say edublogs! Edublogs is a custom setup and NOT EVEN using pro-sites at all.

My main issue right now is the fact that pro-site is not mobile responsive. This boggles my mind as to why it's not mobile responsive. It's 2018! I just got done setting the pricing tables and I noticed it looked terrible on mobile. I'm trying to work on it but don't really have that much experience with media queries yet.

So anyone out there with experience on this matter? I'm sure I'm not the only one with this issue. I'm really trying to make pro-sites work since it has some functionality I really need without having to code it.

  • Keith
    • WPMU DEV Initiate

    I assume you're referring to your page at https://simplebutcreative.com/web-design/plans

    In my Chrome Browser, this looks fine to me. Because on screen widths > 980px I see 3 price levels in a row. Then, as width decreases, the tables collapse beneath each other. Furthermore, the individual price panels change width as screen width changes. So, the pro-site price comparison table is definitely responsive.

    However, you might not like how it responds. For example, I don't like how the display shows when there is only enough screen width for 2 panels at minimum panel width. Because I feel that, with the center panel a different size, it would be better to go straight to the narrow setting (i.e. below 768px) of showing three panels in a single column.

    Anyway, I feel it's a question of adjusting css to match your desired output. Because, as I say, it's definitely responsive

  • Simplebutcreative Media
    • Site Builder, Child of Zeus

    Keith

    Thanks for the quick response Keith!

    I'm not talking about that URL. That's all Divi there, which is wonderful. Divi does a great job with mobile. I can't say that for pro-site. Pro-site is not even optimized.

    I don't have pro-site installed within that site. But as you said the panels collapses beneath each other which pro-sites doesn't do. I need the pro-sites pricing tables to do the same instead of squeezing the panels within the same row. It needs to be readable through smartphones and tablets.

  • Ash
    • WordPress Hacker

    Hello Simplebutcreative Media

    Yes, I can confirm the responsive issue in pro sites pricing table, I am marking this as a bug and reporting to the developer.

    Meantime, you can use a workaround. From pricing table settings, select Above the table for "First column (Part of table)". Then use the following custom css:

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

    You can use this css in a plugin called Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/ Or you can use a child theme: https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

    Hope it helps! Please feel free to ask more questions if you have any.

    Have a nice day!

    Cheers,
    Ash

  • Katya Tsihotska
    • Support & QA

    Hi Simplebutcreative Media

    Hope you're having a great day!

    The code helped a little bit...I have a couple more things to optimized.

    If you need further assistance with optimization, would you mind to describe what exactly you'd like to change and grant us temporary support access to your site so we'll have a closer look at your site?
    Here's our detailed documentation page about it:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5
    Don't forget to let us know once you'll enable the access.

    I did 980px instead...or should I do both?

    If you need to apply this for devices with width 980 and lower then you can just replace @media only screen and (max-width: 768px) with @media only screen and (max-width: 980px) .

    If you have any additional questions please let us know, we always are happy to help.

    Kind regards,
    Katya

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.