Support » Plugin: Kadence Blocks – Gutenberg Page Builder Toolkit » Make 2 rows with 3 columns collapse into 3 rows & 2 columns on phone

  • Hi!

    I was wondering if it is possible to make two three column rows collapse into three rows with two columns.

    I can’t seem to find any block plugin that helps me with this.

    I used to use bootstrap or regular flexbox code but I really want to make it as simple as possible to edit in gutenberg.

Viewing 5 replies - 1 through 5 (of 5 total)
  • hannah

    (@hannahritner)

    Hey,
    The row layout-block lets you adjust how the rows will collapse on mobile. See here: https://ibb.co/yN5fVpv
    Does that work for you?

    Hannah

    There isn’t a way to do this and maintain the same order.

    You can make one row with three columns, then in each column place a row that is 2 columns on mobile and stacked on desktop. But that won’t give you the correct order.

    A grid block might be something I work on in the future which could have options for this.

    Ben

    Ok, tanks. Maybe I will have to change my layout instead…

    To bad I can’t find a good solution for this.

    Thank you for your answers 🙂

    @ben

    I have tried the solution you posted and got another problem (beside the blocks being out of order but I guess that is just the way it is since this is no real grid).

    When I use 2 columns next to each other on the tablet and stacked on mobile I get also stacked columns when viewed horizontally on the smartphone even though there would be room for 2 columns in one row.

    I know that this kind behavior is controlled by the theme but is there a way to tell Kadence the exact breakpoints between desktop, tablet and mobile? This would help a lot.

    It would be even better if Kadence could manage this by itself where it automatically breaks when the block get to a specific size but it would be a good workaround. 🙂

    Thanks

    Hey,
    It’s an interesting idea, not impossible to consider, what device are you using? I know on an Iphone x for example if you view horizontally it would be in tablet mode.

    Ben

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