We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How to scale my product images through different screen sizes?

How to scale my product images through different screen sizes?

rt12820
New Member
5 0 0

Hello, I need some help with the layout of my products. Is it at all possible to scale or lock the way my product images look through different screen sizes?

 

For example: this is how it looks on my laptop screen (Scale and layout is 100%). 

Screenshot 2024-04-03 at 9.10.19 PM.png

 

It looks fine, but as soon as I put it on the widescreen monitor or zoom out to 90%, the spacing between the products increases, and it does not look good. I have seen Shopify websites where, no matter how much I zoom in or scale out, the scale of the images remains consistent. 

 

This is an example of it being on a wide monitor screen and/or laptop screen (Scale and layout is 90%). 

 

Screenshot 2024-04-03 at 9.15.04 PM.png

 

Do let me know how I can fix this issue. Thank you! 

 

I am using DAWN theme

Replies 7 (7)

Hardik29418
Shopify Partner
2913 418 1083

@rt12820  Please provide website URL.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
rt12820
New Member
5 0 0

My website is not live yet 😞 

Hardik29418
Shopify Partner
2913 418 1083

@rt12820  you can provide me Preview Link

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Hardik29418
Shopify Partner
2913 418 1083

@rt12820 

1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
.promo_slider_div {
  width: 100% !important;
}
</style>

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
rt12820
New Member
5 0 0

Hey Hardik! Appreciate the help ^_^ - i did try inserting the code inside but it didn't seem to work. it issue is still persisting 😞 

Hardik29418
Shopify Partner
2913 418 1083

@rt12820  Can you please place the code so that I can check what is the problem.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email