Single column products page on mobile

[gregcatmull]

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

[Kyle – SUPPORT]

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

[gregcatmull]

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

cheers
Greg

[Kyle – SUPPORT]

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

[gregcatmull]

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

cheers
Greg

[gregcatmull]

its ok done it now cheers! works fine!

[gregcatmull]

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

[gregcatmull]

hide*

[Kyle – SUPPORT]

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

[gregcatmull]

no worries will do!

cheers
greg

[Kyle – SUPPORT]

Thanks 🙂

– Kyle

[sareecolella]

<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.

[Kyle – SUPPORT]

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