Home Forums Weaver Xtreme Theme Trying to locate specific page selectors to switch to 2 column from 3 column

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #70847
    koningdesign
    Participant

    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!

    #70848
    Weaver
    Keymaster

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

    #70849
    Private Reply
    koningdesign
    Participant
    This reply has been marked as private.
    #70850
    scrambler
    Moderator

    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

    #70851
    koningdesign
    Participant

    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!

    #70852
    Weaver
    Keymaster

    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.

    #70853
    Weaver
    Keymaster

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

    Columns Manager Block

     

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

     

    #70854
    koningdesign
    Participant

    OK, will check out.

    Thanks very much!

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