Need to make custom mobile layout

Hi.

I am looking to make a custom mobile layout. The products should be sorted out in 2 different sets. First, there is 4 products in one vertical row, then 8 products in one vertical row(2 products in one horizontal). And then, repeat.

I attached the example below. Thank you so much.

I think we could implement some css code to set on the product collection page

Can you share your site with the protected password so I can take a look?

Here's a good resource for putting your store into two columns:

https://insidethesquare.co/squarespace-tutorials/2-column-mobile-store

1 hour ago, Beyondspace said:

I think we could implement some css code to set on the product collection page

Can you share your site with the protected password so I can take a look?

https://www.vizniuk.com/

2 hours ago, Beyondspace said:

I think we could implement some css code to set on the product collection page

Can you share your site with the protected password so I can take a look?

right now, i do have a layout like that, but it is not repeated. how can i change that?

Here is the code you can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  .products.collection-content-wrapper .list-grid .grid-item {
    width: 50% !important;
    float: left !important;
  }
  .products.collection-content-wrapper .list-grid .grid-item:nth-child(12n + 7){
    clear: left !important;
  }
  .products.collection-content-wrapper .list-grid .grid-item:nth-child(12n + 1), .products.collection-content-wrapper .list-grid .grid-item:nth-child(12n + 2), .products.collection-content-wrapper .list-grid .grid-item:nth-child(12n + 3) ,.products.collection-content-wrapper .list-grid .grid-item:nth-child(12n + 4) {
    width: 100% !important;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

Hi, 

I'm on Avenue 7.0 and have tried almost every code that people have mentioned and still no luck on getting products to appear in 2 columns on the mobile shop. 

Paulambrett.com  

Any help is appreciated! 

On 11/20/2023 at 12:30 AM, thumone said:

Hi, 

I'm on Avenue 7.0 and have tried almost every code that people have mentioned and still no luck on getting products to appear in 2 columns on the mobile shop. 

Paulambrett.com  

Any help is appreciated! 

Use this CSS code

@media screen and (max-width:700px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 5px 5px;
}
div#productList:before {
    display: none;
}
}