[Resolved] messed up columns in ipad landscape orientation

[Arved]

Hi, I have an issue with the columns on the ipad in landscape orientation. The three column layout creates troubles for the events manager calendar widget.

How can I force 1 column design even up to 1025px screen?

Thank you!
Arved

[Leo]

Hi there,

Can you try this CSS?

@media (min-width: 1025px) {
    .site-content {
        display: flex;
        flex-direction: column;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Arved]

Hi Leo, thanks for your quick reply!!

I switched the min to max (so on laptop I get the three column design, just on ipad the column), and it did half of the trick. So it displays vertical now but doesn’t use the full width of the screen on the ipad and therefore still messes up the calendar, now in column view.

Tried to add width: 100% !important; but no change.

Would you have any other idea?

Thanks,
Arved

[Arved]

Basically I am trying to tell the website to behave like on a mobile phone until 1025px.

[Leo]

Is my code still added?

Can you added in so I can see the issue and make some tweaks?

[Arved]

added again, sorry. swapped min for max. if you need min for testing, let me know.

[Arved]

Hi Leo,

I had to remove your css again in the morning so we can work on the website properly. Did you have a look?

Thanks,
Arved

[Arved]

To make it more clear: I am trying to change the mobile breakpoint to 1025 or even higher.

[David]

Hi there,

how about this responsive method.
This will set the sidebars to a min width of 300px, and the main content to 600px.
If there is room to accommodate sidebars in a row it will do so – if not they will wrap to a new full width row:

@media(min-width: 769px) {
    .site-content {
        display: flex;
        flex-wrap: wrap;
    }
    /* Set minimum width of all columsn to 300px */
    .site-content .sidebar,
    .site-content .content-area{
        flex: 1 0 300px;
        margin: 10px !important;
    }
    /* Set main content min width to 600px */
    .site-content .content-area {
        flex-basis: 600px;
    }
    .inside-left-sidebar, .inside-right-sidebar {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

[Arved]

Hey David,

that’s a beautiful solution, much better than what I had thought of. Thank you!

Wish you a nice weekend.

Best,
Arved

[David]

You’re welcome

[Author]

Posts