Products per row (@media queries)

Website is
https://79.170.40.234/newgcp.uk/

i like this!

This must be done using CSS. PHP runs at the server before the page is sent to the browser, so PHP is not aware of the viewport size.

The technique is to use media queries to provide different CSS for different viewport sizes. The layout of your CSS file will be:

/* stuff that applies always */
...

/* stuff for 787 or less */
@media only screen and (max-width:787px) {
...
}

/* stuff for 590 or less */
@media only screen and (max-width:590px) {
...
}

There is loads of info out there about media queries.

It takes ages to work up css for a range of viewports, so you may not get someone to provide the css code via a forum answer.

I use a Chrome extension called “Window Resizer” which enables the viewport to be resized to emulate different devices, so development can be done on a desktop.

Excellent, Thank you for your help.

Can I be cheeky, would you kindly show me example css that I can work on that will display 2 products per row on say @media only screen and (max-width:787px)?

I’m a total novice so really sont know where to start.

Thanks again!

m

Excellent, Thank you for your help.

Can I be cheeky, would you kindly show me example css that I can work on that will display 2 products per row on say @media only screen and (max-width:787px)?

I’m a total novice so really sont know where to start.

Thanks again!

Something like this:

@media only screen and (max-width:768px) {
  .site-main ul.products li.product {
    float:left;
    width: 45%;
  }
  .site-main ul.products li.product:nth-child(odd) {
    clear:both;
    margin-right:10%
  }
  .site-main ul.products li.product:nth-child(even) {
    margin-right:0
  }
}

https://www.w3schools.com/css/

Brilliant.

Do you do custom work? if so what do you charge?

Seeking work or offering to pay is outside the forum guidelines.

Understood.

I’ve applied this update to the .css file.

It seems to have worked, however the fourth product appears under the third instead of next to?

Any ideas?

I don’t get that. The widths are 45% + 10% + 45%, try something that adds up to 99%. Which browser are you using?

Hi

it works when you change the window size on desktop but not on tablets. ive tried on ipad and ipad mini landscape and portrait.

ive tried changing

margin-right:5%;

margin-right:9%;

and

width:40%;

In what way doesn’t it work. My limited understanding of ipads is that they come with different resolutions depending on model and/or can use scaling to give different effective resolutions. Are you able to tell accurately what resolution your ipad and ipad mini are using.

I am using divi theme and i created a website https://www.anokhafashion.com
I added 3 products in a row but in mobile version it is showing only one product per row. I want 2 product per row please help.

Hi I’ve tried the solutions in the forum but can’t get my woocommerce products to display two per row on mobile. Could someone please have a look at my page and make a CSS suggestion?

https://www.meetmarina.com/how-not-to-be-basic/

Really appreciate the help!

RK