[Resolved] iPad display issue in landscape mode

Home Forums Support iPad display issue in landscape mode

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1034133
    Troy

    Hi there,
    I have this issue on the iPad where the main body part of the pages only display in the right half of the screen when it should be fullscreen. The header and footer display correctly though.
    https://craftsix.com.au/wp-content/uploads/2019/10/File-14-10-2019-21-13-43.png

    Appreciate any help to fix this. This issue is only in landscape mode.

    Cheers,
    Troy.

    #1034458
    David
    Staff
    Customer Support

    Hi there,

    The CSS being applied to your Grid is this:

    @media (max-width: 1024px) and (min-width: 781px) {
        #pg-83-0>.panel-grid-cell,
        #pg-83-0>.panel-row-style>.panel-grid-cell,
        #pg-83-1>.panel-grid-cell,
        #pg-83-1>.panel-row-style>.panel-grid-cell,
        #pg-83-2>.panel-grid-cell,
        #pg-83-2>.panel-row-style>.panel-grid-cell,
        #pg-83-3>.panel-grid-cell,
        #pg-83-3>.panel-row-style>.panel-grid-cell {
            -ms-flex: 0 1 50%;
            -webkit-flex: 0 1 50%;
            flex: 0 1 50%;
            margin-right: 0;
            margin-bottom: 30px;
        }
    }

    Which is why its defaulting to 50% width. Not sure if you have control over that CSS.
    You can forcibly overwrite it like so:

    @media (max-width: 1024px) and (min-width: 781px) {
        #pg-83-0>.panel-grid-cell,
        #pg-83-0>.panel-row-style>.panel-grid-cell,
        #pg-83-1>.panel-grid-cell,
        #pg-83-1>.panel-row-style>.panel-grid-cell,
        #pg-83-2>.panel-grid-cell,
        #pg-83-2>.panel-row-style>.panel-grid-cell,
        #pg-83-3>.panel-grid-cell,
        #pg-83-3>.panel-row-style>.panel-grid-cell {
            -ms-flex: 0 1 100%;
            -webkit-flex: 0 1 100%;
            flex: 0 1 100%;
        }
    }
    #1036124
    Troy

    Thanks for the reply David. Can you kindly tell me where to find and overwrite this text? Pardon my ignorance but which CSS page? My coding skills are minimal.

    I tried adding all your 100% wide text to Additional CSS and that only fixes the home page. All other pages are still displaying at 50%.

    A simple control in the Customizer area would’ve been a nice feature for me.

    Thanks,
    Troy.

    #1036160
    David
    Staff
    Customer Support

    How are you adding the grids to the site?

    #1036579
    Troy

    I am using Page Builder by SiteOrigin.

    #1036618
    David
    Staff
    Customer Support

    Might be worth looking at there documentation or asking there support – i would think there is some sort of responsive controls.
    The issue is the CSS is being applied to specific Element IDs making each one unique and difficult to override on mass.

    #1039913
    Troy

    Thank you for the clues David. I went back to the pages, revised the way I had built them and that fixed the issue. Cheers.

    #1040039
    David
    Staff
    Customer Support

    Awesome – glad to hear that 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.