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