- This topic has 14 replies, 2 voices, and was last updated 4 months ago by
David.
-
AuthorPosts
-
November 3, 2020 at 6:18 am #1515997
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.
November 3, 2020 at 8:04 am #1516360David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 3, 2020 at 8:39 am #1516421Paul
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.
November 3, 2020 at 9:18 am #1516492David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 3, 2020 at 9:20 am #1516496Paul
What is the default break point for Ipads in GP?
November 3, 2020 at 9:29 am #1516510David
StaffCustomer 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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 3, 2020 at 10:36 am #1516586Paul
Thanks – I think the 834px one makes most sense.
November 4, 2020 at 1:16 am #1517246David
StaffCustomer SupportYou’re welcome!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 4, 2020 at 1:32 am #1517264Paul
Did you have the CSS for this – been playing around and can’t get it to work!
November 4, 2020 at 1:33 am #1517266Paul
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?
November 4, 2020 at 3:08 am #1517378David
StaffCustomer 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 4, 2020 at 3:41 am #1517424Paul
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.
November 4, 2020 at 3:47 am #1517432David
StaffCustomer 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%; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 4, 2020 at 3:59 am #1517441Paul
All good now. Thanks for help.
November 4, 2020 at 6:10 am #1517558David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.