Photos showing up different sizes

Topic summary

Main issue: Collection list images on the storefront appear at inconsistent heights even though they were cropped the same.

Key suggestions provided:

  • In theme editor, change the Collection list image ratio to “Square.” The user could not find this option (theme: Impact).
  • Add CSS to enforce a fixed media height. Initial snippet (in theme.css) targeting .shopify-section–main-list-collections didn’t help.
  • Latest guidance: Add this in the section’s Custom CSS for the Homepage Collection list:
    .content-over-media>:is(picture,img,video,iframe,svg,video-media){height:300px;}
    (Height value can be adjusted.)
  • Shopify staff advised updating each collection’s main image via Admin: Products > Collections > select collection > Upload/Change image, and to contact the theme developer if issues persist.

Context/details:

  • Theme: Impact. Store URL shared: https://nobad.store/
  • Screenshots and code snippets are central to understanding where to place CSS.

Current status:

  • User has tried a code edit that didn’t work and requested clearer instructions.
  • Helper provided a more specific selector and placement (Custom CSS in the relevant section). Awaiting user confirmation; no confirmed resolution yet.
Summarized with AI on December 24. AI used: gpt-5.

impact