[Support request] Retina display in portrait mode

Home Forums Support Retina display in portrait mode

  • This topic has 14 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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.

    #1516360
    David
    Staff
    Customer Support

    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.

    #1516421
    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.

    #1516492
    David
    Staff
    Customer Support

    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.

    #1516496
    Paul

    What is the default break point for Ipads in GP?

    #1516510
    David
    Staff
    Customer Support

    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

    #1516586
    Paul

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

    #1517246
    David
    Staff
    Customer Support
    #1517264
    Paul

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

    #1517266
    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?

    #1517378
    David
    Staff
    Customer Support

    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;
        }
    }
    #1517424
    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.

    #1517432
    David
    Staff
    Customer Support

    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%;
        }
    }
    #1517441
    Paul

    All good now. Thanks for help.

    #1517558
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.