[Resolved] messed up columns in ipad landscape orientation

Home Forums Support messed up columns in ipad landscape orientation

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1324203
    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

    #1324320
    Leo
    Staff
    Customer Support

    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 🙂

    #1324350
    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

    #1324363
    Arved

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

    #1324364
    Leo
    Staff
    Customer Support

    Is my code still added?

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

    #1324366
    Arved

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

    #1324575
    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

    #1324743
    Arved

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

    #1325001
    David
    Staff
    Customer Support

    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;
        }
    }
    #1325217
    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

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