Multiple Columns and Rows mobile break issue

  • Hello guys,

    first of all: great work, I enjoy working with your theme and love its performance. I just didn’t find a solution to a very basic “problem”. Does not have necessarily have anything to do with your theme. Maybe I’m just missing something here.

    So what I want to build is a layout on desktop with lets say 6 columns, 3 columns per row:

    === === ===
    === === ===

    So i create 1 “wp-block-columns” with 3 “wp-block-column” and just duplicate that. On desktop version its fine.

    Now when I go to the tablet the layout is like that:

    === ===
    ===
    === ===
    ===

    What it should look like is:

    === ===
    === ===
    === ===

    So how to add all 6 “wp-block-column” in one “wp-block-column” instead of two to avoid the gap?

    On mobile its fine again, as every col has 100% width.

    Thanks for your time.
    Splidonie

    • This topic was modified 3 years, 8 months ago by splidonie.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi there,

    its not possible with the Core Columns Block… but you can do it with the GenerateBlocks plugins Grid Block:

    https://generateblocks.com

    Heres some info on how adding more Grid Items will wrap to create new rows:

    https://docs.generateblocks.com/article/grid-overview/#adding-more-grid-items

    Thread Starter splidonie

    (@mbrobin)

    Hey David,

    thanks for your quick response. For performance reasons I try to keep the amount of plugins as little as possible. So maybe I ll try to solve the problem by using only CSS and just skip the 2 columns layout. Not ideal but fast forward…

    Anyways thanks for the links. I ll have a look at the plugin with its blocks and performance for sure

    As performance goes you won’t find anything more performant than GenerateBlocks it literally only outputs the HTML and CSS required for what you add.

    If you add NO GB blocks it generates no code.
    You add one block and it only outputs the HMTL and CSS for that block.
    And theres no JS or CSS stylesheets dependencies.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Multiple Columns and Rows mobile break issue’ is closed to new replies.