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

Solved
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

Can anyone help?

 

Thanks!

Nicolas

0 Likes
Natztech
Shopify Partner
2094 535 1284

hello @NicolasMaverde 

can you please share screenshot which images do you want to Reduce image size on the product page

NicolasMaverde
Explorer
74 1 33

Hi @Natztech 

 

I mean the big Image on every product page like this:

NicolasMaverde_0-1624460234961.png

 

Thanks in advance!

0 Likes

@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

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
Natztech
Shopify Partner
2094 535 1284

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;
}

 

NicolasMaverde
Explorer
74 1 33

@Natztech @diego_ezfy 

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:

NicolasMaverde_0-1624535982601.png

 

Can you edit the code so it just works for desktop.

 

Thanks in advance!

Nicolas

 

0 Likes
Natztech
Shopify Partner
2094 535 1284

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;
}
}