Styling blocks for mobile.

Changing style of blocks for mobile I wanted something like this;
see image: https://hardy.global/mobiles.jpg

Hi there ??

This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
?

@media (max-width: 480px) {
    .wc-block-handpicked-products .wc-block-grid__products {
        display: flex !important;       
    }
    .wc-block-handpicked-products .wc-block-grid__product {
        flex: 1 0 33% !important;
    }
}

Results:

https://www.screencast.com/t/z8dKmh8y7ZxL
?
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Cheers!

Gabriel, you are a star thank you so much for the css that worked perfectly.
May I just ask you how I would make the 2 blocks below ~ wc-block-product-category (3 images and four images) not stack at all, so it stays as it would on mobile?
I would be eternally grateful.
https://heritagecountrypottery.com/blocks/
https://hardy.global/mobiles.jpg
Regards Garry

This seemed to work after looking at your previous code. I think I have worked out the convention…

@media (max-width: 480px) {
   .peter2-class .wc-block-grid__products {
       display: flex !important;       
   }
   .peter2-class .wc-block-grid__product {
       flex: 1 0 33% !important;
   }
}

@media (max-width: 480px) {
   .peter3-class .wc-block-grid__products {
       display: flex !important;       
   }
   .peter3-class .wc-block-grid__product {
       flex: 1 0 25% !important;
   }
}

Hi Garry ??

You are most welcome! ??

That’s wonderful! I’m checking your site and I can see that you could figure it out for the second row of blocks ??

Great! I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Cheers!

https://heritagecountrypottery.com/blocks/

How do I target the red column with three images?
I want to stop this block from stacking the images on mobile.

I have targeted the top six images with…

@media (max-width: 480px) {
.wc-block-handpicked-products .wc-block-grid__products {
display: flex !important;
}

.wc-block-handpicked-products .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

I have targeted the bottom four images with…

@media (max-width: 480px) {
.peter3-class .wc-block-grid__products {
display: flex !important;
}
.peter3-class .wc-block-grid__product {
flex: 1 0 25% !important;
}
}