Mobile layout

Store Design
1

Hi,

I would like to have the collection list on the front page displayed as a grid, similar to the desktop version. Unfortunately, on mobile devices, the collections are displayed one below the other. Is it possible to arrange the collection list with 2 items next to each other on mobile?

1 Like
2

This question is simple, would you be willing to share the website link?

3

this is the link for the website : https://sofizare.com/

4

Hi @Jonathanlondon

Which collection list are you referring to?

5

As you can see on the screenshot, the collection list is Carousel. I would ask if it possible to have the collection list 2 row next to eachother

thumbnail_SOFIZARE - Groothandel Stainless Steel Sieraden & Accessoires.jpg
thumbnail_SOFIZARE - Groothandel Stainless Steel Sieraden & Accessoires.jpg1179Ă—2300 138 KB

6

Do you want this effect?

CustomService_0-1728631419995.png
CustomService_0-1728631419995.png307Ă—555 134 KB

If you need further collaboration, please contact me.

7

Thanks for the info, do you mean like this?

Made4uoRibe_0-1728661574674.png
Made4uoRibe_0-1728661574674.png557Ă—704 285 KB

If it is, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.list-collections__item-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}
  • And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

8

Hi, yes i mean this grid for the mobile phone users.

I have tried the CSS code, unfortunately it didn’t change the grid for the mobile phone.