Venture: How to fix Product Thumbnails' height on mobile

Solved
CluelessA
Excursionist
17 0 6

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.

 

dmwwebartisan
Shopify Partner
9289 2151 2928

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
CluelessA
Excursionist
17 0 6

@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.

0 Likes
dmwwebartisan
Shopify Partner
9289 2151 2928

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
CluelessA
Excursionist
17 0 6

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.

 

 

 

0 Likes
dmwwebartisan
Shopify Partner
9289 2151 2928

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 | Bag is a cart drawer that maximizes your sales. View app →
CluelessA
Excursionist
17 0 6

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

0 Likes