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

  • Author
    Posts
  • #163594

    drstavrov
    Member

    Hey Taras,
    Once again I need your help. I saw a topic with a similar problem but I couldn’t manage to fully understand it.

    Please take a look at this page:

    https://drstavrov.com/aestheticdermatology/fillers/lips/

    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 blog I need help with is drstavrov.com.

    #163602

    tarasdashkevych
    Theme Author

    Hello Stavrov,

    “I would like to add a block between the ones that already exist…”
    – To add a grid to your page, please use the Columns block. The block also allows to set number of columns in your grid.

    “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.”
    – By default, the block does not provide such functionality but we can use a custom CSS to have such layout in mobile views.

    Once your grid is added to the page using the Columns block, please also add a custom CSS class to the Columns block: https://wordpress.com/support/adding-additional-css-classes-to-blocks/

    For example, you can use lips-info as your custom CSS class for the block.

    Please let me know when it’s done, so I can inspect your page and develop a custom CSS for you.

    Kind regards,
    Taras

    #163605

    drstavrov
    Member

    Hello Taras,
    Thanks for the fast response. I will do this tomorrow and reply you when I am ready. Thanks!

    #163617

    drstavrov
    Member

    Hello Taras,
    I’ve added the columns and images as you said. Please let me know if you need further assist from me.

    Best regards,
    Stavrov

    #163631

    tarasdashkevych
    Theme Author

    Hi Stavrov,

    Please add this custom CSS to your site to create a two columns layout for your grid in mobile views:

    
    /* Display 2 columns layout in mobile views when Columns block has lips-info class. */
    @media (max-width: 500px) {
      .wp-block-columns.lips-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem;
      }
      
      .wp-block-columns.lips-info > * {
        margin-top: 0;
      }
    }
    

    Let me know if you have any additional questions.

    Kind regards,
    Taras

    #163634

    drstavrov
    Member

    Hello Taras,
    I’ve just added it via my WordPress mobile app and looks great.
    Once again thanks for kind support.

    Best regards,
    Stavrov

    #163639

    tarasdashkevych
    Theme Author

    You are always welcome, Stavrov!

    Kind regards,
    Taras

The topic ‘4 column block on pc to be viewed as 2 rows of 2 on mobile’ is closed to new replies.