How to show more than 3 thumbnail images on product page on mobile

[avaskye]

Hi, I'm using the Dawn theme and noticed that only three thumbnail images are displayed on the product page for mobile, despite our website having more than six images available. Is there a way to showcase more thumbnails, so our customers are aware of additional images to view?

Any assistance would be greatly appreciated. Attaching image below for reference. Thank you so much!

[ZestardTech]

Hello @avaskye ,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the Bottom of the file:

@media screen and (max-width: 749px){
.thumbnail-list__item.slider__slide {
width: calc(25% - 0.6rem);
}
}

[avaskye]

Hi @ZestardTech Unfortunately that didn't work for our website. Do we need to change any of the numbers? It's still showing only 3 thumbnails. 

[ZestardTech]

Hello @avaskye 
Please share your store URL and Password.
So that I will check and let you know the exact solution here.

[avaskye]

@ZestardTech website is 6cbb37.myshopify.com and password is hblo - thank you so much in advance!! 

[ZestardTech · Accepted solution]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > section-main-product.css and paste this at the Top of the file:

@media screen and (max-width: 749px){
.thumbnail-list__item.slider__slide {
width: calc(25% - 0.6rem)!important;
}
}

[avaskye]

THANK YOU! I see 4 thumbnails now :0) 

[ZestardTech]

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

[BSS-Commerce]

Hi @avaskye ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[avaskye]

@BSS-Commerce Hi, yes, of course! Our store link is 6cbb37.myshopify.com and password is hblo - thank you so much in advance! 

[BSS-Commerce]

Hey @avaskye ,

You can add CSS to the base.css file:

@media only screen and (max-width: 749px) {
.thumbnail-list.list-unstyled.slider slider--mobile {
flex-grow: 1;
display: grid !important;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
}

[avaskye]

I just tried adding this to our base.css code, but it's still showing 3 thumbnails on the product page on mobile. Am I doing something incorrectly? Thanks!