Reduce image size on product page just on desktop version (Modular theme)

NicolasMaverde
Explorer
74 1 33

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

I mean these images and the following on to the bottom of the page:

NicolasMaverde_0-1624861852105.png

 

Can anyone help?

 

Thanks!

Nicolas

0 Likes
Pallavi
Shopify Expert
2235 370 484

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

.product-features--container .feature-image .feature-image-bg {
width: 80%;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
NicolasMaverde
Explorer
74 1 33

@Pallavi 

 

Thanks for your reply.

 

1. Problem: the code works for desktop and mobile. I just want it to work on desktop.

2. Problem: The images are cutted now:

before:

NicolasMaverde_1-1624864107812.png

 

 

 

with your code:

NicolasMaverde_0-1624864068764.png

 

Can you try again?

Just for dektop and the images should be the same like now but just smaller.

 

Thanks in advance!

 

Nicolas

0 Likes
Pallavi
Shopify Expert
2235 370 484

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (min-width: 1024px){
.product-features--container .feature-image .feature-image-bg {
width: 80%;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
NicolasMaverde
Explorer
74 1 33

@Pallavi 

 

now it just works on dektop, thats good.

But the Images are still cutted with this code. Maybe it depands on the image aspect ratio?

 

With your code it looks like this:

NicolasMaverde_0-1624879227710.png

 

But I want it like that:

NicolasMaverde_1-1624879251385.png

 

 

That means not just the width also the height.

You know what I mean?

 

Nicolas

0 Likes