Hello,
When I use woocommerce on my ipad in this theme and go to a product category page the image is very big – it fills up the entire screen and I have to scroll a lot the view all of the products.
I would rather have a few columns with products on ipad view – that is much more user friendly – do you know of a way we can make this happen?
Thanks you sincerely, Niels
Hi,
You can try to change this with custom css something like I targeted on our demo: http://screencast.com/t/ud2Qubg36
But maybe you will need further css customization so if you don’t have some css/html experience I don’t recommend you to do this. You can try this css in Theme Panel > Custom Css and adjust it if you need: http://screencast.com/t/ud2Qubg36
@media (max-width: 768px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left !important;
margin: 0 3.8% 2.992em 0 !important;
padding: 0;
position: relative;
width: 22.05% !important;
clear: none;
}
}
Hope this helps!
Thanks, it kind a works, now the fonts are too big. Maybe an easier solution:
Is is possible to create a padding around the shop items op ipad and mobile view – because like I said, the image is now page filling on those devices. This way I have no colomns but it still looks nice.
Thank you!
Hi,
You can also adjust font size if you want to use the above code, just add it to the above media query:
.woocommerce ul.products li.product h3 {
font-size: 14px;
line-height: 20px;
}
Or maybe this will help more if you don’t need columns also on phone’s screen: http://screencast.com/t/6447e0tXOIub
@media (max-width: 767px){
.woocommerce-page ul .product {
margin: 0px auto 20px auto !important;
width: 70% !important;
float:none !important
}
.woocommerce-page ul .product.last{
margin-right: auto !important;
}
}
Thanks!
