Want To Change Collection List Horizontal Scroll To Grid On Mobile

Hello! I’m using the impulse theme on my store and I’m having trouble with my featured collection list on mobile. The problem I’m facing is that when on mobile, the users would have to scroll to the side to see the products.

Instead, I would like to show it as a grid with 2 products in each row. So for example, if there was 6 products in the collection, I would like to have 3 rows with 2 products each.

I browsed through this helpful community and kinda found a solution, only problem is that the products are not aligned properly. Could someone help me out?

This is the code I found:
@media only screen and (max-width: 768px) {
div[data-section-type=“featured-collection”] .grid-overflow-wrapper {
text-align: center
}
div[data-section-type=“featured-collection”] .grid-overflow-wrapper .grid.grid–uniform {
white-space: unset!important;
display: block!important;

}
}"

Here’s also a link to my store: www.twinkledekor.myshopify.com
Would highly appreciate if someone could help me out, tried fixing this by myself with no luck :confused:

Hi dude,

Do you solved your optimisation ?

I’m want to exactly the same.

If yes, can you share a “how to” guide ?