Solved

Venture: How to fix Product Thumbnails' height on mobile

CluelessA
Excursionist
22 0 5

Hi, it's me again, spent many hours on this and going insane.

On the mobile version of my site, the product thumb red border underneath the main image is too tall and ugly (desktop version is beautiful). NOTE the problem is only visible on a phone. Sample URL:

https://www.abysm-internal.com/products/gothic-dragon-bedding-set-music-art-goth-decor

I've found the culprit to be this line of code on the CSS: $product-slider-image-height: 130px;

If I edit it, of course it edits the desktop version too.

Please how do I make another line that affects only the media? For example I tried:

@media only screen and ($product-slider-image-height) {height: 80px !important;}

But of course no luck.

Thank you so much in advance.

Please no direct messages (spam) through my website, I won't respond.

 

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@CluelessA 

  1. In your Shopify Admin go to:  online store > themes > actions > edit code.

 2. Find  Asset > theme.scss.liquid  and paste this at the bottom of the file. 

@media only screen and (max-width: 749px) {
.product-single__thumbnail {height: 75px !important;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 6 (6)

dmwwebartisan
Shopify Partner
12280 2546 3694

@CluelessA 

  1. In your Shopify Admin go to:  online store > themes > actions > edit code.

 2. Find  Asset > theme.scss.liquid  and paste this at the bottom of the file. 

@media only screen and (max-width: 989px) {
.product-single__thumbnail {height: 75px !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CluelessA
Excursionist
22 0 5

@dmwwebartisan

Hi, thank you but I tried that and it doesn't work, it makes the thumbnails overlap the title.

The line: " $product-slider-image-height: 130px; " Is the one that seems to control what I'm trying to control, which is the slick-slider height, just need it to somehow affect the desktop and mobile version differently.

Note: trying to do something like:

@media only screen and (max-width: 800px) {
.slick-slide (or track) {
height: 80px;
}}

Also did not work.

dmwwebartisan
Shopify Partner
12280 2546 3694

@CluelessA 

Please share screenshot what do you want

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CluelessA
Excursionist
22 0 5

I don't know how to provide that screenshot, I'd like the mobile version to look proportionate like the desktop version does (as it shows on the link).

On the desktop it looks nice and almost square. On the mobile the red bounding box is too tall, leaving a lot of empty space top and bottom per each image.

 

 

 

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@CluelessA 

  1. In your Shopify Admin go to:  online store > themes > actions > edit code.

 2. Find  Asset > theme.scss.liquid  and paste this at the bottom of the file. 

@media only screen and (max-width: 749px) {
.product-single__thumbnail {height: 75px !important;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CluelessA
Excursionist
22 0 5

😱😱😱

AHHH!! I did not notice the difference between .product-single__thumbnail and .product-single__thumbnails !!!!!!!!!! I had edited the one with "s" the first time without realizing the difference. Sorry about that.

Omg it is the little things that sometimes really screw with us...

Thank you so much mate, life saver no. 1