Trying to locate specific page selectors to switch to 2 column from 3 column

[koningdesign]

I am having difficulty trying to learn which CSS selectors I need to use to switch from 3 column on desktop, to 2 column on specific view widths. This is just for one particular page.

More specifically, it is the Home page that has two rows of three columns.

I tried this code in my custom css to no avail:

@media screen and (min-width: 640px) and (max-width: 948px) {
.page-id-14 .wp-container-6.wp-block-column, .wp-container-8.wp-block-column, .wp-container-10.wp-block-column, .wp-container-14.wp-block-column, .wp-container-16.wp-block-column, .wp-container-18.wp-block-column {
flex: 50%;
}
}

Since this site is not live yet, please allow me to provide you the link privately.

Thanks for your help!

[Weaver]

If you create a private post, only the moderators can see the post.

[koningdesign]

This reply has been marked as private.

[scrambler]

You are using the block editor column block, and so it only has the option to stack them in one column on mobile.

We could create CSS to change that to two columns on mobile, but that would not help you as each row is a different block, so you would end up with 2 col, 1 col, 2 col 1 col…

To have all the boxes flow in either 2 rows of 3 columns or 3 rows of two columns, they would need to be created as one set of boxes.

If you have Plus, you could use the Flex columns widget to create that layout as the widget has the option for different number of columns on each device a explained below

X-Plus Flex Columns Widget: Usage and Customizations – Weaver Xtreme Guide (weavertheme.com)

Then you would need to use the Shortcode plugin to insert that widget inside your content area.

An other way would be to do it with HTML as explained in the Guide article below, then we can use Custom CSS to change the mobile behavior to what we want

Responsive Columns and Widgets – Weaver Xtreme Guide (weavertheme.com)

Or you may want to look for custom column blocks with a option to change the number of columns on different device sizes

[koningdesign]

Thank you for covering multiple options for me!

I am eager to become more familiar with the Plus Plugin and it’s shortcodes, but can you provide a little more direction to get me started?

Also, considering my client’s lack of technical skills, will the Flex columns widget still allow them to add/edit the content in the WordPress Block Editor?

It’s unfortunate, but I think WordPress should have considered the option to switch from a 3 column 2 row layout, to a 2 column 3 row layout within the Columns Block Editor.

When I have time I will investigate, custom column blocks for changing the number of columns on different device sizes.

Thanks again!

[Weaver]

I believe it might be difficult to mix the FlexColumn shortcode into the Block Editor work flow. Flex Column is a fairly complex shortcode, and requires significant understanding to use effectively, with options being required in more than one place. If your goal is to build a site for a customer that you want to use the block editor (and that is really a sound strategy these days), using shortcodes of almost any kind is a bit out of the standard Block Editor work flow.

However, there are many plugins that add new blocks to the Block Editor. I have not searched, but it is possible there is a plugin that can build columns based on screen width.

I would suggest scanning the plugin library for a block editor plugin that might do that.

[Weaver]

This column block might work for you. The plugin is available from the WP plugin repository.

Columns Block

 

The docs says you can select columns responsively. You would have to build the specific page content individually.

 

[koningdesign]

OK, will check out.

Thanks very much!

[koningdesign]

As it turns out the Columns Manager Block plugin proved to be more difficult to customize, and too bloated for what I was needing. I did discover, GenerateBlocks (free version). This allowed me to do exactly what I wanted by using their GridBlock. Even better it is far less bloated.

Thanks for your help and direction in having me scan the WP plugin library!

 

[Author]

Posts