[Resolved] iPad display issue in landscape mode

[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.

[David]

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

[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.

[David]

How are you adding the grids to the site?

[Troy]

I am using Page Builder by SiteOrigin.

[David]

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.

[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.

[David]

Awesome – glad to hear that 🙂

[Author]

Posts