Title: Woocommerce responsive view
Last modified: November 13, 2020

---

# Woocommerce responsive view

 *  Resolved [Jamie-Lee Keevy](https://wordpress.org/support/users/jamiekeevy1/)
 * (@jamiekeevy1)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/woocommerce-responsive-view/)
 * When I select a category and view it on a mobile the images are elongated, does
   anyone have some css advice on how I can make it nice and squared on a mobile
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fwoocommerce-responsive-view%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Support [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/woocommerce-responsive-view/#post-13659246)
 * Hey [@jamiekeevy1](https://wordpress.org/support/users/jamiekeevy1/)
 * You can do this with a little bit of custom CSS code.
 * Go into your site’s admin Dashboard and select Appearance → Customize → Additional
   CSS. In the CSS textbox on the left, add the following code:
 *     ```
       @media screen and (max-width: 1024px) {
         .woocommerce.product-columns-5 ul.products li.product, 
         .woocommerce-page.product-columns-5 ul.products li.product {
           width: 48%;
           margin-left: 4%;
           margin-right:0;
         }
   
         .woocommerce.product-columns-5 ul.products li.product:nth-child(2n+1), 
         .woocommerce-page.product-columns-5 ul.products li.product:nth-child(2n+1) {
           margin-left: 0;
         }  
   
       }
   
       @media screen and (max-width: 768px) {
         .woocommerce.product-columns-5 ul.products li.product, .woocommerce-page.product-columns-5 ul.products li.product {
           width: 100%;
           margin: 0;
         }
       }
       ```
   
 * Select “Save Changes” from the top, and your changes will be applied to your 
   site.
 *  Thread Starter [Jamie-Lee Keevy](https://wordpress.org/support/users/jamiekeevy1/)
 * (@jamiekeevy1)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/woocommerce-responsive-view/#post-13659290)
 * [@senff](https://wordpress.org/support/users/senff/) Thank you so much!
 *  Thread Starter [Jamie-Lee Keevy](https://wordpress.org/support/users/jamiekeevy1/)
 * (@jamiekeevy1)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/woocommerce-responsive-view/#post-13659292)
 * Thank you [@senff](https://wordpress.org/support/users/senff/)

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

The topic ‘Woocommerce responsive view’ 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/)

## Tags

 * [categories](https://wordpress.org/support/topic-tag/categories/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [mobile](https://wordpress.org/support/topic-tag/mobile/)

 * 3 replies
 * 2 participants
 * Last reply from: [Jamie-Lee Keevy](https://wordpress.org/support/users/jamiekeevy1/)
 * Last activity: [5 years, 5 months ago](https://wordpress.org/support/topic/woocommerce-responsive-view/#post-13659292)
 * Status: resolved