How to increase thumbnail size on mobile view in Halo theme?

[Loz86]

Hi guys,

Can anyone provide a snippet or tell me what snippet I can adjust to increase the current size of thumbnails in mobile view on the product page

Halo theme

URL in comments

[Loz86]

https://onlinebeautyessentials.com/

[Abdosamer]

@Loz86 , go to your base.css and add the following code :

@media (max-width:768px){

a.productView-thumbnail-link {
    height: 10rem !important;
    
}
}

[Made4uo-Ribe]

Hi @Loz86

You mean the product thumbnails?

If it is check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

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: 991px){
.productView-thumbnail {
    width: 150px !important;
}
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Loz86]

@Abdosamer

thanks for the reply.

No joy with that in the base.css unfortunately (I’ve tried increasing the rem value also)

I did try that snippet in the custom css section in customiser, which does increase the height (2nd thumbnail goes larger than the 1st for some reason) of the thumbnails but makes them very slim/narrow.

So I tried adding width: 10rem !important; under height but that didn’t work and just put the 1st thumbnail slightly behind the 2nd

also get this error in the custom css section when using the snippet there (which is the only place it seems to have an effect

““a.productView-thumbnail-link” does not appear to be used in this section. Try a different selector.”

[Abdosamer]

@Loz86 , try to add this code :

.productView-thumbnail {
    width: 15rem !important;
}

Result:

[Loz86]

@Made4uo-Ribe

Thanks for the reply.

That didn’t work in the base.css

I don’t have any of the other files.

The only one I can think it would go in would be the component-product.css which is where I’ve also tried placing it, but they still remain tiny.

Not sure if this has anything to do with their control, again this is in the component-product.css

[Loz86]

@Made4uo-Ribe

Also tried the snippet in custom CSS section of customiser and get this result

This is what I’m aiming for

[Abdosamer]

@Loz86 , try to add this code in base.css :

@media (max-width:765px){
.productView-thumbnail {
    width: 15rem !important;
}

}

Added below this bracket :

or go to theme.liquid and add this code before the tag :

[Loz86]

Ah no I’m looking to keep them in a line and just increase their size ( height and width respectivly)

Like this

[Made4uo-Ribe]

Did you try to place in the theme.liquid.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

And save.

On my inspect tool this is the result.

It will automatically go down when there no space on it.

[Loz86]

Yes I’ve tried it in there and I do get the same however I’m trying to retain the line/row they currently appear in and not have them pile on top of each other

So the result would be like this

[Loz86]

@Made4uo-Ribe

When the page loads (on mobile)

The original row container does load briefly as if its putting them in a single row as it does by default when they are tiny

like this

but then insteads piles them on top of each other in a that grid style

[Abdosamer]

Hi @Loz86 , remove the previous code and add this instead:

@media (max-width:768px){

.productView-thumbnail .productView-thumbnail-link {
    
    width: 11rem !important;
   
}
.slick-track {
    margin: 0 !important;
}

.productView-for.clearfix.slick-initialized.slick-slider {
    padding: 0 !important;
}
.productView-thumbnail {
    width: 12rem !important;
}

}

Result:

You can add the code to base.css or component-product.css.

[Loz86]

The result in your screenshot is perfect.

However this is the result when placed in component-product.css (no change)

This is the result when placed in base.css (no change)

I’ve also tried the snippet enclosed in tags in the theme.liquid but get this

[Abdosamer]

@Loz86 , did you use an app for this section, it seems other code overwriting my code?, can I have the permission to access the theme files to implement it myself?

[Loz86]

Nope no app for this section.

That would be much appreciated

I’ll send you the access code on whatsapp

[PageFly-Oliver]

Hi @Loz86 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[Loz86]

Hi @PageFly-Oliver

Many thanks for the reply.

That does increase the size of the thumbnails but unfortunately as with the other recommendations above it piles the thumbnails on top of each other and doesn’t keep them in a single scrollable row (as they are by default)