[Resolved] Theme not responsive on iPad Pro

[Tom]

We’re planning on adding the mobile menu breakpoint filter in GPP 2.1, which is set to be released later this month. I can update this topic when the code is ready to test if you’d like?

[jbpyn]

Oh wow, nice feature. Thanks Tom, the update would be great. 🙂

[Jesse]

Hi Tom, I’m just testing GPP 2.1-rc.4 and was wondering if you could give an example of the mobile menu breakpoint filter?

[Tom]

We couldn’t fully fit a filter in there yet, but we simplified the necessary CSS considerably:

@media (max-width: 1000px) {
    .main-navigation .menu-toggle,
    .main-navigation .mobile-bar-items,
    .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: block;
    }

    .main-navigation ul,
    .gen-sidebar-nav {
        display: none;
    }

    [class*="nav-float-"] .site-header .inside-header > * {
        float: none;
        clear: both;
    }
}

1000px being the width you want it to kick in at.

[Jesse]

Any tips for getting the toggle to float to the right?
[Link removed]

[Tom]

Since you’re using the mobile header, I would do this instead: https://generatepress.com/forums/topic/mobile-header-size-tablet-view/#post-541540

[jbpyn]

Revisiting this, I still can’t get it to work. I need the site to be responsive on the 10.5″ iPad Pro. Unfortunately, no amount of messing with this rule seems to work. I would be grateful for any tips.

Thanks

[Tom]

Is any of that CSS still added? Your mobile menu isn’t kicking in until 768px.

[Author]

Posts