CSS for two columns of products on mobile in version 7.0

Hi, 

My website is version 7.0 and so I am having trouble with formatting my site to show multiple products per row for mobile view. I have tried using code below although it is specific to version 7.1

 @media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

Can someone please help me with solution to suit version 7.0? 

Hi,

Can you share link to product page? We can help easier

I have multiple product pages, site is https://www.soulfooddepot.com.au/

That worked perfectly across all product pages, thankyou so much Vicks!!

On 4/20/2023 at 2:05 AM, Vicks said:

Try this:

 

@media only screen and (max-width: 700px){
  #productList {
    display: grid;
    gap:10px;
    grid-template-columns: repeat(2, 1fr);
  }
  #productList .product {
    Float:none;
    width: auto;
  }
  #productList .product .product-image img{
    left:0 !important;
    top:0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}

This will update most of your products. However, I noticed when you select all, the products which are displayed are using different layout. Check if this script works.. and let me know for which page it doesnt work.

Amazing, I was trying to figure this out for a while now. How can I adjust for 3 products in a row?

On 10/6/2023 at 2:25 AM, Sinned98 said:

Amazing, I was trying to figure this out for a while now. How can I adjust for 3 products in a row?

Change number 2 in Line 5 to number 3