ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Neighborhood
• May 27, 2014 at 9:24 pm #78024
  gregcatmull

  Member

  Post count: 109

  Hi guys,

  Currently when I view a product listing page (e.g. http://shop.garsons.co.uk/product-category/garden-furniture/dining-suites-garden-furniture/) from my website on a mobile the products are listed in two column. Is there some CSS I could use to make this single column? I would prefer this as it would make the images large and easier to view for a customer.

  Many thanks

  Greg

  May 28, 2014 at 11:25 am #78187
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Please try adding this custom css

  @media only screen and (max-width: 479px) {
  body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
    width: 100%!important;
  }
  }

  – Kyle

  May 28, 2014 at 12:15 pm #78206
  gregcatmull

  Member

  Post count: 109

  perfect that works, is there also a way in which I can hide the ‘showing all xx products’ on mobile?

  cheers
  Greg

  May 28, 2014 at 1:13 pm #78222
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Of course, add this:

  .woocommerce-count-wrap {
    display: none;
  }

  Make sure you add it inside the media query that I gave you above, so that it only applies for mobiles

  – Kyle

  May 28, 2014 at 1:41 pm #78235
  gregcatmull

  Member

  Post count: 109

  could you write the full code for me for both of the above.

  cheers
  Greg

  May 28, 2014 at 1:48 pm #78238
  gregcatmull

  Member

  Post count: 109

  its ok done it now cheers! works fine!

  May 28, 2014 at 1:49 pm #78240
  gregcatmull

  Member

  Post count: 109

  could you give me some code which will hidee my header background on mobiles
  cheers
  Greg

  May 28, 2014 at 1:49 pm #78241
  gregcatmull

  Member

  Post count: 109

  hide*

  May 28, 2014 at 2:24 pm #78255
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  I’m afraid you will need to open new threads for new customisations as the question does not relate to the original question or title

  – Kyle

  May 28, 2014 at 2:39 pm #78267
  gregcatmull

  Member

  Post count: 109

  no worries will do!

  cheers
  greg

  May 28, 2014 at 2:41 pm #78270
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Thanks 🙂

  – Kyle

  October 6, 2014 at 6:40 am #117375
  sareecolella

  Member

  Post count: 1

  <p>Hi thanks for the code it worked also for me..</p>
  <p>but I am having problem regarding the sizes of the single product page showing very weird.
  BTW just to let you know I’ve added some csS to display images a little bigger and writing smaller.</p>
  <p>[css attached below]</p>
  <p>how can I make it work just for desktop and not for mobile?</p>
  <p>i mean I am happy to leave mobile view as it was.. how can i do that? thanks </p>
  my website http://www.desuclothing.com

  .product_meta .sku_wrapper {
  display: none;
  }
  /* IMAGE AREA */
  .woocommerce div.product div.images {
  width: 50%;
  }
  /* DETAILS AREA */
  .woocommerce div.product div.summary {
  width: 30%;
  }
  

  Attachments:

  You must be logged in to view attached files.
  October 6, 2014 at 7:03 am #117384
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Wrap it in a media query, for e.g:

  @media only screen and (min-width: 7699px) { 
  .product_meta .sku_wrapper {
  display: none;
  }
  /* IMAGE AREA */
  .woocommerce div.product div.images {
  width: 50%;
  }
  /* DETAILS AREA */
  .woocommerce div.product div.summary {
  width: 30%;
  }
  }

  – Kyle

• Back to forum

  Posted in: Neighborhood