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

[NicolasMaverde]

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

[Kinjaldavra]

hello @NicolasMaverde 

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

[NicolasMaverde]

Hi @Kinjaldavra 

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

Thanks in advance!

[diego_ezfy]

@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

[Kinjaldavra]

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]

@Kinjaldavra @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:

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

Thanks in advance!

Nicolas

[Kinjaldavra · 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;
}
}

[bondbeyondbox]

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!

[bondbeyondbox]

Also I have dawn theme, not modular.

[Kinjaldavra]

@bondbeyondbox 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

[bondbeyondbox]

Thank you so much! This is webiste url https://bond-beyond-box.myshopify.com/ and the password is BoxBeyondBond.

[fullheartart]

I am using "Taste" and there is no "theme.css" file... is there another to use instead?  My site is: https://www.fullheartart.com/