Product Per Row Setting On The Mobile / Desktop Mode

Store Design
, , ,
1

Hi, we are using the MAKER theme for the website herhealthco.de

we are trying to set row setting to two products per row in the mobile version - everytime we do this the desktop version also adapts to this setting. Can someone help us? We want the desktop version to be 3 products per row the mobile version to be 2 products per row

Thanks!

2

hello there

To achieve the desired layout, you will need to use CSS media queries to specify different styles for different screen sizes. Media queries allow you to apply different CSS styles based on the size of the device screen, allowing you to create responsive designs that adapt to different devices.

/* Mobile styles */
@media (max-width: 767px) {
  .product-grid-item {
    width: 50%;
  }
}

/* Desktop styles */
@media (min-width: 768px) {
  .product-grid-item {
    width: 33.33%;
  }
}

In this code, we use two media queries to specify different styles for mobile and desktop devices. The first media query applies to screen sizes up to 767 pixels wide (i.e., mobile devices) and sets the width of the product grid items to 50% to display two products per row. The second media query applies to screen sizes 768 pixels wide and above (i.e., desktop devices) and sets the width of the product grid items to 33.33% to display three products per row.