Title: Styling blocks for mobile. Last modified: August 15, 2021 --- # Styling blocks for mobile. * Resolved [Garry Rigby](https://wordpress.org/support/users/indigojones66/) * (@indigojones66) * [4 years, 9 months ago](https://wordpress.org/support/topic/styling-blocks-for-mobile/) * How can I style for mobile? On mobile all the blocks stack one image on top of the other. I wanted the Hand-picked Products (Top 6 images) to stack two by two and the Products by category to have no stacking ~ so it looks same as on desktop * RE: [https://heritagecountrypottery.com/blocks/](https://heritagecountrypottery.com/blocks/) * Hand-picked Products (Top 6 images) Products by Category (Middle 3 images ~ Front Page) Products by Category (Bottom 6 images ~ Latest Additions) * Regards Garry * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fstyling-blocks-for-mobile%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 6 replies - 1 through 6 (of 6 total) * Thread Starter [Garry Rigby](https://wordpress.org/support/users/indigojones66/) * (@indigojones66) * [4 years, 9 months ago](https://wordpress.org/support/topic/styling-blocks-for-mobile/#post-14771643) * Changing style of blocks for mobile I wanted something like this; see image: [http://hardy.global/mobiles.jpg](http://hardy.global/mobiles.jpg) * Plugin Support [Gabriel – a11n](https://wordpress.org/support/users/gabrielfuentes/) * (@gabrielfuentes) * [4 years, 9 months ago](https://wordpress.org/support/topic/styling-blocks-for-mobile/#post-14774170) * 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](https://www.screencast.com/t/z8dKmh8y7ZxL) If you’d like to learn more about CSS, I highly recommend using the [free tutorials at w3schools](https://www.w3schools.com/w3css/). Here, you can find the basics of [selectors](https://www.w3schools.com/cssref/css_selectors.asp)( how to target the right element on the page), and [properties](https://www.w3schools.com/cssref/)( how to change the element on the page). * Cheers! * Thread Starter [Garry Rigby](https://wordpress.org/support/users/indigojones66/) * (@indigojones66) * [4 years, 9 months ago](https://wordpress.org/support/topic/styling-blocks-for-mobile/#post-14775376) * 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://heritagecountrypottery.com/blocks/) [http://hardy.global/mobiles.jpg](http://hardy.global/mobiles.jpg) Regards Garry * Thread Starter [Garry Rigby](https://wordpress.org/support/users/indigojones66/) * (@indigojones66) * [4 years, 9 months ago](https://wordpress.org/support/topic/styling-blocks-for-mobile/#post-14775608) * 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; } } ``` * Plugin Support [Gabriel – a11n](https://wordpress.org/support/users/gabrielfuentes/) * (@gabrielfuentes) * [4 years, 9 months ago](https://wordpress.org/support/topic/styling-blocks-for-mobile/#post-14778208) * 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! * Thread Starter [Garry Rigby](https://wordpress.org/support/users/indigojones66/) * (@indigojones66) * [4 years, 8 months ago](https://wordpress.org/support/topic/styling-blocks-for-mobile/#post-14797061) * [https://heritagecountrypottery.com/blocks/](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](https://wordpress.org/support/users/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](https://wordpress.org/support/users/media/) (max-width: 480px) { .peter3- class .wc-block-grid__products { display: flex !important; } .peter3-class .wc- block-grid__product { flex: 1 0 25% !important; } } Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Styling blocks for mobile.’ is closed to new replies. * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504) * [WooCommerce](https://wordpress.org/plugins/woocommerce/) * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq) * [Support Threads](https://wordpress.org/support/plugin/woocommerce/) * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/) * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/) * 6 replies * 2 participants * Last reply from: [Garry Rigby](https://wordpress.org/support/users/indigojones66/) * Last activity: [4 years, 8 months ago](https://wordpress.org/support/topic/styling-blocks-for-mobile/#post-14797061) * Status: resolved