Liquid, JavaScript, themes, sales channels
Hi there,
the images on my product page on desktop version are too big.
I want to makle them smaller but just on desktop version (not mobile!)
maverde.de
Can anyone help?
Thanks!
Nicolas
Solved! Go to the solution
This is an accepted solution.
hello @NicolasMaverde
the code so it just works for desktop.
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 749px){
.template-product .product-layout-images {
max-width: 35% !important;
width: 100%;
margin: 0 auto;
display: block;
}
}
hello @NicolasMaverde
can you please share screenshot which images do you want to Reduce image size on the product page
@NicolasMaverde, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.product-layout-images {
max-width: 35% !important;
width: 100%;
margin: 0 auto;
display: block;
}
You can change the 35% value to any other percentage you wish.
Kind regards,
Diego
hello @NicolasMaverde
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-product .product-layout-images {
max-width: 35% !important;
width: 100%;
margin: 0 auto;
display: block;
}
Thanks to both of you.
Both codes work but not just for desktop version like I want it.
On mobile I don´t want a change. With your code it looks like this:
Can you edit the code so it just works for desktop.
Thanks in advance!
Nicolas
This is an accepted solution.
hello @NicolasMaverde
the code so it just works for desktop.
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 749px){
.template-product .product-layout-images {
max-width: 35% !important;
width: 100%;
margin: 0 auto;
display: block;
}
}
Hi! I saw your wonderful advice and am wondering if you could help me with a similar issue. I would like to reduce the featured product image only on desktop. Do you maybe have a code I could use? Any help would eb greatly appreciated as I have been looking for an answer nonstop and haven't been able to find anything. Thank you in advance!
Also I have dawn theme, not modular.
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.
Thank you so much! This is webiste url https://bond-beyond-box.myshopify.com/ and the password is BoxBeyondBond.
I am using "Taste" and there is no "theme.css" file... is there another to use instead? My site is: https://www.fullheartart.com/
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