scale up picture to screen size at product features section

Store Design
, , , ,

Topic summary

A user working with the Shrine Pro Draft Theme on Shopify wanted to scale product feature section images to better fit screen sizes, noting excessive padding on both sides regardless of screen size.

Initial Attempts:

  • Another user suggested responsive CSS using media queries to set image width to 100% at specific breakpoints
  • This solution didn’t address the core issue of excessive padding

Resolution:
The original poster solved the problem using CSS that targets the hotspots image container:

  • Sets max-width: 96% for desktop screens
  • Adjusts to max-width: 100% for mobile devices (under 768px)
  • Uses !important to override existing theme styles
  • Credits ChatGPT for generating the initial code, which was then customized to specific needs

The discussion is resolved with working code provided for others experiencing similar padding/scaling issues in product feature sections.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello Guys,

does anyone know if its possible to scale the picture of a product feature section, according to screen size?

this is the Shrine Pro Draft Theme I am working on: https://h3n266ycv8gabrlc-68898914601.shopifypreview.com

here is a Screenshot for further explanation of what I mean:

Unbenannt 11.PNG
Unbenannt 11.PNG1904×922 17.5 KB

Thank you very much in advance for any help with this.

Best regards

2

Hello @GOMAK

You can fix it adding CSS. Example

@media (max-width:500px) {

.product-features img {

width:100%;

}

}

This mean device width 500px will have fullscreen size image, you can add more for other sizes.

1 Like
3

Thank you, but that is not what i was looking for

4

Hi @GOMAK

The link you shared does not match with the screenshot. Could you please elaborate it further?

1 Like
5

@GOMAK that was example , try playing with CSS. If you need help share store access i can help you.

6

its the same page, the section visible in the Screenshot is just for size reference

7

@GOMAK

Could you please share the store link with us so we can check it further?

1 Like
8

https://h3n266ycv8gabrlc-68898914601.shopifypreview.com/

9

i just wonder why the padding on either side is so much more than it needs to be, it is that way on small and big screen sizes,

the Image itself should have a high enough resolution to be bigger

10

for anyone having the same problem, this was the code which did exactly what I wanted:

.hotspots-image-container,
.hotspots-image {
  max-width: 96% !important;
}

@media (max-width: 768px) {
  .hotspots-image-container,
  .hotspots-image {
    max-width: 100% !important;
  }
}

I got it from ChatGpt, which was able to understand me after a few tries. I adjusted the percentages to my needs afterwords.