[Resolved] iPad view doesn't go full width

[Dave]

Hey guys, when I view my site (http://dev.northwestfiretraining.com/) in “Inspect” in Chrome and click the iPad under device toolbar, it shows all my content all to the left and the elements and widgets not 100%. I tried messing with the CSS but I can’t seem to get it to look right. Help?

GeneratePress 1.3.46

GP Premium 1.2.96

[Tom]

Looks like you have some custom CSS targeting tablets.

Can you try removing it to see if that’s the issue?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dave]

I have CSS targeting the breakpoint where the menu goes to 2 lines after you reach a certain width. I changed that, but it still doesn’t fix it. Am I looking at the right thing tho? I’m looking at the @media sections.

[Dave]

Could it have to do with the percentage set for left and right sidebar? I have custom values in my functions.php in my child theme – but that’s sitewide for all devices. Is there a way to target tablet devices – if that is in fact the problem?

[Tom]

You currently have:

@media only screen and (max-width: 1100px) {
    .site-content {
        display: table;
    }
}

Try replacing it with:

@media only screen and (max-width: 1100px) {
    .site-content {
        display: table;
        width: 100%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dave]

That worked to fix the width so that it goes all the way across, thanks Tom!

Is it possible though, to make the content on the screen display like it does on a desktop computer while being viewed on an iPad? Like can I tweak the sidebars somehow using @media or the functions.php to make it display like desktop view rather than mobile view?

[Tom]

This might help: https://generatepress.com/forums/topic/sidebar-floated-om-tablet/#post-175994

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dave]

Yeah that worked to move them a bit, but still not what I was hoping for. I just switched it back to the way we had before where the content is 100% width to the screen. Thanks for all your help Tom!

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts