How can I change my collection list layout to 1x3 on mobile?

Store Design
,
1

Hello,

I’ve gone through the fixes in other threads but not had any luck.

I want my collection list to be 1x3 (1 collection as a square per row) but my website stay the same 3x1 (3 collections on 1 row)

I use the “Impulse” paid theme and my shop is - www.VLRSHOP.com

Thanks

Valour_1-1683619155154.png
Valour_1-1683619155154.png382×783 197 KB

2

To change the layout of the collection list to display one collection as a square per row instead of three collections on one row, you’ll need to modify the code of your theme. Here’s a general guide to achieving this:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you’re using and click on the “Actions” button, then select “Edit code” from the dropdown menu.
  3. In the code editor, locate the file that controls the collection list section. This file could vary depending on your theme, but it’s usually named something like collection-list.liquid, collection-grid.liquid, or similar.
  4. Open the file and find the code that generates the collection items or the grid layout.
  5. Look for a loop that iterates through the collections and generates the collection items. This loop could be something like {% for collection in collections %} or similar.
  6. Inside the loop, find the HTML structure or CSS classes responsible for displaying the collection items.
  7. Adjust the HTML structure or CSS classes to make each collection item display as a square. You may need to modify the grid or flexbox styles to achieve this. For example, you can set a fixed width and height for the collection items to make them square.
  8. Save the changes to the file.
3

Please add this CSS code at the bottom of your theme.css file

@media only screen and (max-width: 414px) {
.grid--no-gutters .grid__item {
   width: 100% !important;
}
}