Title: Mobile Layout Woocommerce
Last modified: August 21, 2016

---

# Mobile Layout Woocommerce

 *  [stevespi](https://wordpress.org/support/users/stevespi/)
 * (@stevespi)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/mobile-layout-woocommerce/)
 * Hi,
    Just started using your theme for a new woo commerce store. For most of 
   the site it works really well.
 * However when its in responsive mode on my phone, the add to basket button under
   the product overlap each other and looks pretty squished up.
 * My Site [http://www.petproductsonline.co.uk](http://www.petproductsonline.co.uk)(
   its only a test site at the moment).
 * Is there any easy way to fix this with some CSS code?
 * Many thanks
 * Steve

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

 *  [batharoy](https://wordpress.org/support/users/batharoy/)
 * (@batharoy)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/mobile-layout-woocommerce/#post-4586688)
 * Try this
 *     ```
       .coupon .button {
           margin-bottom: 2px;
       }
       ```
   
 *  Thread Starter [stevespi](https://wordpress.org/support/users/stevespi/)
 * (@stevespi)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/mobile-layout-woocommerce/#post-4586689)
 * Hi,
 * Thanks for the code. However didn’t seem to change it.
 * It’s on the main shop page where the products are in a grid format.
 * Works great on all the other pages on my mobile. Just that page.
 * Many thanks
 * Steve
 *  Thread Starter [stevespi](https://wordpress.org/support/users/stevespi/)
 * (@stevespi)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/mobile-layout-woocommerce/#post-4586690)
 * Hi,
 * Thanks for the code. However didn’t seem to change it.
 * It’s on the main shop page where the products are in a grid format.
 * Works great on all the other pages on my mobile. Just that page.
 * Many thanks
 * Steve
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/mobile-layout-woocommerce/#post-4586714)
 * You need [@media](http://www.themesandco.com/snippet/media-queries-responsiveness/)
   to control the smaller viewports. For iPhone5, you can then try:
 *     ```
       .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button {
         font-size: 50%;
         width: 50%;
       }
       ```
   

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

The topic ‘Mobile Layout Woocommerce’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

 * 4 replies
 * 3 participants
 * Last reply from: [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * Last activity: [12 years, 3 months ago](https://wordpress.org/support/topic/mobile-layout-woocommerce/#post-4586714)
 * Status: not resolved