Retina display in portrait mode

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.

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.

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.

What is the default break point for Ipads in GP?

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

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

You're welcome!

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

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?

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;
    }
}

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.

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%;
    }
}

All good now. Thanks for help.

You're welcome