Retina display in portrait mode

[Paul]

Hello,

I have an issue with the sidebar displaying on a Retina Ipad (7th generation) when in portrait mode. I have tried on an older Ipad and the sidebar does not load.

How can I stop the sidebar displaying on a retina ipad in portrait mode.

Note the issue is not apparent in dev tools, only on the actual device.

[David]

Hi there,

i notice you have this CSS:

@media (min-width: 768px) {
   .right-sidebar #primary {
       max-width: calc(100% - 300px);
    }
    .right-sidebar #right-sidebar {
        min-width: 300px;
    }
}

You need to change the 768px to 769px so the main content fills the entire space sooner. Otherwise the Sidebar drops to the bottom of the content but your main content is not fullwidth.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Have changed that, it was an error that slipped in during my testing.

The main issue still remains. I have 2 ipads side by side, the older version display correctly ie no sidebar in portrait whilst the retina version is showing a sidebar in portrait mode. Seems like the retina version is not respecting CSS media queries. Note this issue is not apparent in dev tools only on device or browserstack. Also note I have a couple of other sites displaying the same issue.

[David]

The newer device will have a higher CSS resolution.
Older 9.7″ is 768px
10.5″ is 834px
12.9″ is 1024px

So you would need to increase you min-widths to cover the larger device size.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

What is the default break point for Ipads in GP?

[David]

You can see the breakpoints here:

https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

In your case as your using CSS to adjust the Sidebar size you would need to change the CSS. What size iPad do you want to move the sidebar below the content ? The largest device ie. 1024px

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Thanks – I think the 834px one makes most sense.

[David]

You’re welcome!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Did you have the CSS for this – been playing around and can’t get it to work!

[Paul]

Seems like something changed in GP3. I’m pretty sure it didnt used to behave like this. Has there been a change to the tablet settings?

[David]

No, the responsive breakpoints in GP have remained the same.
The difference here is you’re using Custom CSS to change the Sidebars behaviour, which was originally set to the GP default tablet breakpoint.

Try this CSS:

@media (min-width: 835px) {
    .right-sidebar #primary {
        max-width: calc(100% - 300px);
    }

    .right-sidebar #right-sidebar {
        min-width: 300px;
    }
}

@media(max-width: 834px) {
    .site-content {
        display: flex;
        flex-direction: column;
    }

    .right-sidebar #primary,
    .right-sidebar #right-sidebar {
        width: 100%;
        max-width: unset;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

That worked thanks.

I also have the same issue on another site that doesn’t use custom CSS for the sidebar – do you want a separate ticket for this? I added a URL in private info.

[David]

Just this CSS should work for that site:

@media(max-width: 834px) {
    .site-content {
        display: flex;
        flex-direction: column;
    }
    .right-sidebar #primary,
    .right-sidebar #right-sidebar {
        width: 100%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

All good now. Thanks for help.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts