Display only 2 collections per row on Mobile for specific area

[Toptoys2uHS]

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.

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!

[Moeed]

Hey @Toptoys2uHS 

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

Best Regards,
Moeed

[Toptoys2uHS]

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

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

[Moeed]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
a.collection-item {
    width: 41vw !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[Toptoys2uHS]

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!

[Moeed · Accepted solution]

Hey @Toptoys2uHS 

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

<style>
@media screen and (max-width: 767px) {
div#shopify-section-template--18615043653913__0911a356-6c35-4664-bf8b-7c1bb53e0ba6 a.collection-item {
    width: 41vw !important;
}
}
</style>

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

[Toptoys2uHS]

Hello Moeed,

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

[Moeed]

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.

[websensepro]

Please share website Url and theme name 

[Toptoys2uHS]

Hello, thank you for your reply.

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