Multiple columns on mobile version | WordPress.org

Resolved Cesare
(@cezareluke)

4 years, 2 months ago
To view two columns of products on mobile version i entered the following css code but it doesn’t work:
```
@media screen and (max-width: 767px) {
	.home .site-main ul.products li.product {
	  width: 48%;
	  margin: 0 0 0 4%;
	  clear: none;
	}

	.home .site-main ul.products li.product:nth-of-type(2n+1) {
	  clear: both;
	  margin: 0;
	}
}
```
What is the problem?

Thank you all

The page I need help with: [log in to see the link]

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

con
(@conschneider)

Engineer

4 years, 2 months ago
Hi @cezareluke

Try this instead:
```
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
  
  ul.products li.product {
  max-width: 200px;
  float: left;
  margin-right: 50px;
  }
  
}
```
Result: https://d.pr/i/yChV4u

Kind regards,
Thread Starter Cesare
(@cezareluke)

4 years, 2 months ago

Hi @conschneider

I tried but it still doesn’t work, the products now come out smaller.

The result is this: https://profumabucato.it/wp-content/uploads/2022/03/4b8d2bfb-9f7c-4202-8b1e-cf96ba4ce077.jpg

Kind regards

Niall a11n
(@wpniall)

4 years ago

Hi there @cezareluke,

I’m sorry we missed your last post. Have you been able to resolve this issue? From what I see on the Essenze per bucato page, there are currently two columns on mobile devices:

Link to image: https://d.pr/i/CrCnRq

Are you still seeing something different like in the screenshot you shared above? If so, please let us know and we can take a closer look. Thank you!

Thread Starter Cesare
(@cezareluke)

4 years ago

Hello,
yes I solved the problem.
Thank you so much anyway

Cesare

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

The topic ‘Multiple columns on mobile version’ is closed to new replies.

4 replies
3 participants
Last reply from: Cesare
Last activity: 4 years ago
Status: resolved