FROM CACHE - en_header

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

Accepted Solution (1)

Accepted Solutions
Kinjaldavra
Shopify Partner
2302 569 1407

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

Replies 10 (10)
Kinjaldavra
Shopify Partner
2302 569 1407

hello @NicolasMaverde 

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

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
NicolasMaverde
Explorer
74 1 33

Hi @Kinjaldavra 

 

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

NicolasMaverde_0-1624460234961.png

 

Thanks in advance!

diego_ezfy
Shopify Partner
2799 528 729

@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
Shopify Partner
2302 569 1407

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
NicolasMaverde
Explorer
74 1 33

@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

 

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

 

Thanks in advance!

Nicolas

 

Kinjaldavra
Shopify Partner
2302 569 1407

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
bondbeyondbox
New Member
11 0 0

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
New Member
11 0 0

Also I have dawn theme, not modular.

Kinjaldavra
Shopify Partner
2302 569 1407

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

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
bondbeyondbox
New Member
11 0 0

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