4 column block on pc to be viewed as 2 rows of 2 on mobile

  • Hey support,
    Once again I need your help.
    Please take a look at this page:

    https://filari.bg/postavyane-na-hialuron-v-ustnite/

    I would like to add a block between the ones that already exist, which consists of 4 columns, each of the with 25% width. I would like when I open the page from mobile to be seen as 2 rows, with 2 columns, each one of them with 50% width. I will use the same on different pages and I don’t have any 4 column blocks at the moment.

    Is it possible to assist me with the custom CSS?

    Best regards,

    Stavrov.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @kstavrov,

    With block editor, it can not be possible, but you need to customize each column, add this class: mobile-col-50 to your desired columns, then put the CSS below in Appearance > Customize > Custom CSS/JS

    .wp-block-column.mobile-col-50 {
    max-width: 50%;
    padding: 0 10px;
    clear: both;
    }

    Screenshot 1: https://i.postimg.cc/y83CFgbb/image.png
    Screenshot 2: https://i.postimg.cc/BbndtXFN/image.png

    Best Regards

    Thread Starter kstavrov

    (@kstavrov)

    Hello,

    thanks, that works so smooth.

    Wish you all the best,
    Stavrov.

    You’re most welcome,
    I’m glad it is solved.

    Update: Keep in mind, if you want that CSS to work only on mobile, you can use the following CSS instead of the previous CSS:

    @media(max-width: 480px) {
    .wp-block-column.mobile-col-50 {
        max-width: 50%;
        padding: 0 10px;
        clear: both;
    }
}
    • This reply was modified 3 years, 8 months ago by Shahin.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘4 column block on pc to be viewed as 2 rows of 2 on mobile’ is closed to new replies.