Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
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;}
}
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!
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.
Please share screenshot what do you want
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.
This is an accepted solution.
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;}
}
😱😱😱
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024