Return to previous page

Products layout on a mobile devices - by syhuh1125

This topic has 4 replies, 3 voices, and was last updated 9 years, 11 months ago ago by Eva Kemp

syhuh1125

Participant

January 9, 2015 at 04:47

Hello,

When viewing the shop page on a mobile device the products are shown one per line.
What file in the css and where in the CSS file do I need to change to make the products show 2 products next to each other instead of one.

Thanks & Regards,
SY Huh

#32559 Copied

3 Answers
Robert Hall

Support staff

January 9, 2015 at 08:52
Hello,

Try to add following code into custom.css file.
```
@media (max-width: 479px){
.products-grid.product-count-4 .product:nth-child(n) {
width: 50%;
}
}
```
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.
#32572 Copied
syhuh1125

Participant

January 11, 2015 at 15:21

Hello,

I want to add some margin between the product image but I’ll do that myself.
You can close this topic.

Thanks & Regards,

SY Huh

#32837 Copied

Eva Kemp

Support staff

January 12, 2015 at 10:04

Hello,

Ok. Let us know if there are any questions.

Thank you.
Regards,
Eva Kemp.

#32881 Copied
Tagged: mobile devices, mobile layout, mobile products, mobile wordpress, responsive design, seo friendly, woocommerce themes
Viewing 4 results - 1 through 4 (of 4 total)