Scrollable 1 column collection grid on homepage

Store Design
1

Hello, I need to set a scrollable 1 column collection grid on hompage just for mobile version, my website is infinitycosmetics.it

Now I have 2 column per row.

Then I would like 1 column collection grid not scrollable in the rest of website, just in mobile version.

Any suggestion?

1 Like
2

@INFINITYCOS

can you please send store url

3

https://www.infinitycosmetics.it/

1 Like
4

Hi,

Please go to Actions > Edit code > assets > theme.min.css

In the theme.min.css file, please add the code below.

@media screen and (max-width: 640px)
  .row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: space-around;
    margin-right: -100px;
    margin-left: -100px;
  }
}

Because the theme uses jQuery .col-md-12, there are margins around the collection items.
If you want to adjust the space (left & right margin), please change the amount of the margin-left & margin-right.

Thanks

5

@INFINITYCOS

sorry i can’t see any issue can you show me

6

I still see 2 columns per row, any other suggestions?

7

Now I have 2 columns per row on mobile homepage, I need 1 column scrollable horizontally. Just in the homepage.

unnamed.jpg
unnamed.jpg1284Ă—2637 150 KB

8

Any news?

1 Like
9

Hi,

You have not added the code I gave you.

Please follow the steps below.

  1. Please go to Online Store > Actions > Edit code > Assets

  2. (Click to) Open the “theme.min.css” file

  3. Please copy the code below and paste it to the theme.min.css at the end of the file.

@media screen and (max-width: 640px)
  .row .homepage-featured-products{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: space-around;
    margin-right: -100px;
    margin-left: -100px;
  }
}

If you want to make the product pictures a bit smaller, you may change the value of margin-right & margin-left. You can copy & paste the code below (for smaller product pictures).

@media screen and (max-width: 640px)
  .row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: space-around;
    margin-right: -50px;
    margin-left: -50px;
  }
}

You can copy & paste one of above codes.

Hope it helps.

Thanks.

10

@INFINITYCOS

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.min.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 640px){
.row.homepage-featured-products {
    flex-wrap: nowrap;
    overflow: scroll;
}
.homepage-featured-products .grid__item {flex: 0 0 100%;max-width: 100%;}
}
1 Like
11

@KetanKumar Thanks dear! Is it possible to add arrow to let know it is a scrollable gallery?

12

I need arrows navigation in homepage grids. @KetanKumar

1 Like
13

@INFINITYCOS

no sorry current code doesn’t possible but its possible to customization code

14

ok @KetanKumar thanks, how I have to modify the code?