- This topic has 14 replies, 2 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
November 3, 2020 at 6:18 am #1515997Paul
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.
November 3, 2020 at 8:04 am #1516360DavidStaffCustomer SupportHi 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.
November 3, 2020 at 8:39 am #1516421PaulHave 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.
November 3, 2020 at 9:18 am #1516492DavidStaffCustomer SupportThe newer device will have a higher CSS resolution.
Older 9.7″ is 768px
10.5″ is 834px
12.9″ is 1024pxSo you would need to increase you min-widths to cover the larger device size.
November 3, 2020 at 9:20 am #1516496PaulWhat is the default break point for Ipads in GP?
November 3, 2020 at 9:29 am #1516510DavidStaffCustomer SupportYou 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
November 3, 2020 at 10:36 am #1516586PaulThanks – I think the 834px one makes most sense.
November 4, 2020 at 1:16 am #1517246DavidStaffCustomer SupportYou’re welcome!
November 4, 2020 at 1:32 am #1517264PaulDid you have the CSS for this – been playing around and can’t get it to work!
November 4, 2020 at 1:33 am #1517266PaulSeems 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?
November 4, 2020 at 3:08 am #1517378DavidStaffCustomer SupportNo, 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; } }
November 4, 2020 at 3:41 am #1517424PaulThat 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.
November 4, 2020 at 3:47 am #1517432DavidStaffCustomer SupportJust 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%; } }
November 4, 2020 at 3:59 am #1517441PaulAll good now. Thanks for help.
November 4, 2020 at 6:10 am #1517558DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.