[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
  • #1324531

    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>

    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…

    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.


    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.

    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?

    It has far better control then using the grid method:

    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.