Archived topic
Columns on tablet too early wrap
3 replies · Started by Roman on June 11, 2020
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...
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.
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.
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.
