Reduce image height

Store Design

Topic summary

A user seeks help reducing the height of featured product images on their Shopify store.

Initial Solutions Attempted:

  • A designer provides CSS code targeting .grid__item.slider__slide with a fixed max-width: 300px
  • The user requests percentage or viewport-based sizing instead of fixed pixels, noting images have inconsistent heights

Refinement Process:

  • The designer updates the code to use max-width: 15% instead
  • This causes unintended side effects on the product page, making products appear too small

Final Solution:

  • A more specific CSS selector is provided: #shopify-section-template-1362529559920__featured_collection .grid__item.slider__slide with max-width: 18%
  • This targets only the featured collection section to avoid affecting other pages

The discussion demonstrates iterative troubleshooting to balance image sizing while preventing layout issues elsewhere on the site.

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

Hi guys,

Can you help me to reduce the height of the Featured product images

My url: https://189ee3-2.myshopify.com/

Thank you,

Screenshot (1).png
Screenshot (1).png1277×600 578 KB

2

Add This Css in your Edit Code > base.css File

.grid__item.slider__slide {
    max-width: 300px !important;
}
2 Likes
3

Thank you, but can you set the size by % or vh, I don’t want to set by fix figures.

And the images are not the same height.

4

Okay For Your Requirment Add This Code On My old Code

.grid__item.slider__slide {
    max-width: 15% !important;
}
1 Like
5

This code also affects my Product page

6

ohh, Product Was Very Small To add This css That’s Why side Effect Above css But I Give A new css Add This One.

section#shopify-section-template--16325952995510__featured_collection .grid__item.slider__slide {
    max-width: 18% !important;
}