Solved

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

Can anyone help?

 

Thanks!

Nicolas

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1422

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

 

View solution in original post

Replies 11 (11)

Kinjaldavra
Shopify Partner
2302 570 1422

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

 

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

NicolasMaverde_0-1624460234961.png

 

Thanks in advance!

diego_ezfy
Shopify Partner
2935 562 883

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Kinjaldavra
Shopify Partner
2302 570 1422

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

@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 570 1422

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

 

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 570 1422

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

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

fullheartart
Tourist
3 0 0

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