Display only 2 collections per row on Mobile for specific area

Store Design
,
1

Hello All,

I am having some trouble making a specific collection display only two images on Mobile compared to Desktop.

I understand that this would have to be done through some CSS changes as Shopify does not offer this level of customisation through their editor.

Unfortunately, after looking through the code and thinking I have found the specific section, whenever I make changes, it does not update on the front-end.

Please see the code that I have tried to implement into theme.css.

@media screen and (max-width: 999px) {
.scroller {
overflow: hidden;
margin: 0 calc(-1 * var(–mobile-container-gutter)); /* On mobile we remove the container gutter to make sure the scroll is edge to edge */
}

.scroller__inner #shopify-section-template–18615043653913__0911a356-6c35-4664-bf8b-7c1bb53e0ba6 {
padding-bottom: 20px;
margin-bottom: -20px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
white-space: nowrap;
border-radius: 50%
}

Unfortunately, when viewing on mobile, the display does not update, as you can see in the image below.

Update collection list.png
Update collection list.png386×676 185 KB

As you can see where the red rectangle is highlighted, there are collections visible outside of the first two, which I would like to hide.

Would anyone be able to update the code to reflect this change?

The website can be found here: https://toptoys2u.co.uk/

Appreciate any help!

2

Hey @Toptoys2uHS

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

3

Please share website Url and theme name

4

Hello, I have updated the original post to display the website link.

It can also be found here: https://toptoys2u.co.uk/

5

Hello, thank you for your reply.

The website can be found here: https://toptoys2u.co.uk/

6

Hey @Toptoys2uHS

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1697711138829.png
Moeed_0-1697711138829.png386×699 162 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
7

Hello Moeed,

Thank you for your reply.

It seems to work, however this does it for all collection lists on the homepage.

Is it possible to target that specific section as highlighted on the image, as shown in my original code?

This would help with targeting other sections if needed.

Thank you for your help!

8

Hey @Toptoys2uHS

Remove the previous code and add the new with the same steps.

This code will only work for that specific section.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
9

Hello Moeed,

This seems to have worked, thank you very much for your help!

10

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like
11

hi, please help me how can i solve this for mobile view.

download.png
download.png488×427 53.1 KB

1 Like
12

Hey @urbansouq

Share your store URL and password if enabled, also please elaborate your problem.

Best Regards,

Moeed

13

https://urbansouquae.store/

14

theme name Dawn

https://urbansouquae.store/