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

Technical Q&A
1

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

2

hello @NicolasMaverde

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

3

Hi @Kinjaldavra

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

NicolasMaverde_0-1624460234961.png
NicolasMaverde_0-1624460234961.png1627Ă—926 223 KB

Thanks in advance!

4

@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

5

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

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

NicolasMaverde_0-1624535982601.png
NicolasMaverde_0-1624535982601.png311Ă—584 52.3 KB

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

Thanks in advance!

Nicolas

7

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

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!

9

Also I have dawn theme, not modular.

10

@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.

11

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

12

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

noTheme.png
noTheme.png290Ă—458 12.2 KB