How can I make the entire image visible on my webpage?

Store Design
, , ,

Topic summary

A user encountered an issue where product images on their Shopify collection page were being cropped or cut off, preventing the full image from displaying. They wanted all image content to be visible on the page.

Solution provided:

  • Add CSS targeting the image container within the collection hero section
  • Set position: relative !important on .collection-hero__image-container > img

Outcome:

  • The CSS fix successfully resolved the issue
  • The user confirmed the solution worked
Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

as you can see the whole image is not visible i want it all contents to be visible

https://www.makerlab-electronics.com/collections/arduino-2-microcontrollers

niceeee_0-1692602165767.png
niceeee_0-1692602165767.png1754×752 98.3 KB

supposed to be like this

niceeee_1-1692602188630.png
niceeee_1-1692602188630.png905×384 157 KB

2

Hi @niceeee

Please use this css

.collection-hero__image-container > img {
 position: relative !important;
}
3

thanks bro!!