Convert to 2,3,4 column to 1 Column in Mobile View,

[dhwalin]

How can I convert multiple column content to 1 column in Mobile view? It looks very weird when I add 4 columns in content & they show side by side even in mobile.

Please guide how can I change layout by desktop and mobile?

[buzucan]

it will be nice to have this option. i think that with a little bit CSS you can do that.

[ZebulanStanphill]

Duplicate of #6048. See also: #7315.

[designsimply]

Please keep in mind that the Columns Block is still in beta. 🙂 I tested the beta columns block and didn't find a way to set the numbers of columns, however, since this block is in beta and since there's already a discussion about making it responsive, I am closing this issue in favor of #6048 and I will make sure to note your question on that issue.

^{Seen at http://alittletestblog.com/ running WordPress 4.9.7 and Gutenberg 3.2.0 using Chrome 67.0.3396.99 on macOS 10.13.5.}

[chrisvanpatten]

@designsimply you need to have the containing "Columns" block selected to change the number of columns. In your screenshot, you have a nested "Column" block selected, not its "Columns" parent. (It's a subtle but key change.)

[designsimply]

@chrisvanpatten thanks! Found it! Screenshot for reference:

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13886&action=edit running WordPress 4.9.7 and Gutenberg 3.2.0 using Firefox 61.0.1 on macOS 10.13.6.}

Also wanted to note that I was focusing on the UI before, but really the answer to this question is that a decision needs to be made about if/whether/how the columns block will behave on small screens (responsiveness), which is being discussed in #6048 so we're still good to go with closing this one as a duplicate. 👍

Current front-end view with the Atomic Blocks theme (to document the current state):

^{Seen at http://alittletestblog.com/2018/07/18/columns-block-beta-test/ running WordPress 4.9.7 and Gutenberg 3.2.0 using Firefox 61.0.1 on macOS 10.13.6.}

^{Seen at http://alittletestblog.com/2018/07/18/columns-block-beta-test/ running WordPress 4.9.7 and Gutenberg 3.2.0 using Pixel, Android 8.1.0.}