[Support request] Columns on tablet too early wrap

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

[Leo]

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.

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

[Leo]

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.

[Author]

Posts