[Support request] Columns on tablet too early wrap

Home Forums Support Columns on tablet too early wrap

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1324531
    Roman

    Hello,
    here http://kynologie.slavicin.org/test/ you can see the problem:

    <div class="grid-container">
    <div class="grid-25 tablet-grid-25 mobile-grid-100 clenove-first-column">image</div>
    <div class="grid-50 tablet-grid-50 mobile-grid-100 clenove-second-column">notes</div>
    </div>

    On desktop and mobile OK, but on tablet is grid broken into one column – why?
    I tried to add this css:

    @media (max-width: 1024px) and (min-width: 768px) {
        .clenove-first-column .tablet-grid-25 {
            width: 25%;
        }
        .clenove-second-column .tablet-grid-50 {
            width: 50%;
        }
    }

    but it did not help.
    I have a several web with GeneratePres, some with gutenberg, some without, but I’m still not able to find how to correctly work with columns wrapping on my web – when exactly it breaks columns to rows…
    Any help welcome…

    #1325312
    Leo
    Staff
    Customer Support

    Hi there,

    Looks like it only goes into one column under 767px when the mobile-grid-100 kicks in.

    Try this CSS:

    @media (max-width: 768px) {
        .mobile-grid-100 {
            clear: none;
            width: 50%;
            float: left;
        }
    }

    Tablet breakpoints are tricky to deal with for sure.

    #1325385
    Roman

    Thanks for answer, but after inserting that code I have a problem with right side widget. You can check it, I left that code there.
    I’m wondering, how exactly are mobile-grid-xx, tablet-grid-xx defined, of course in combination with GeneratePress. For exam: when I use content + right side widget area, with 1200px desktop container width, how these grids constants work?
    Are there 5 columns by 1200/5= 240px (I found somewhere in doc, that generate press uses 5 columns, am I right?).
    So, then, grid-25 means what? When it wraps, on which screen width (different device)? How it will work, when I change maximum width from 1200 to 1100px? Etc.
    I think, that these informations are very needed for good working design.

    #1325527
    Leo
    Staff
    Customer Support

    The grid system GP is currently using is actually not the best – it was 6 years ago when we did it but now there is definitely better solution.

    Would you consider using the Grid Blocks from GenerateBlocks?
    https://docs.generateblocks.com/article/grid-overview/

    It has far better control then using the grid method:
    https://docs.generateblocks.com/article/container-overview/#grid-item

    And it’s also using Flexbox.

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