Issue with images cutting off horizontally in Dawn theme on the homepage

Solved

Issue with images cutting off horizontally in Dawn theme on the homepage

healthjefe
Visitor
2 0 1

Can someone help me figure out how to get my images to display correctly on the homepage using Dawn theme?  2 image widths are not adjusting properly.  I tried making all images the same size (but this puts a lot of space between images) and changing the CSS in both the overall theme setting and even just to the section with issues. Here are the 3 CSS changes I tried: 1) img {max-width: 100%; max-height: 100%;}, 2)img {object-fit: cover;}, 3) img {width: auto; max-height: 100%;}

 

The 3 CSS changes didn't yield a different result - no change at all.  Please help!  http://www.healthjefe.com  (scroll down to what makes us the most effective (below the product).  

Accepted Solution (1)

rashidshamloo
Shopify Partner
1 1 0

This is an accepted solution.

If you want the whole image to show up (not be cut off) you can add "object-fit: contain;" to it.

 

Note:  "object-fit: cover;" scales the image to cover the whole parent div which can result in some part of the image being outside of it. and "object-fit: contain;" makes sure the whole image is visible even though some parts of the parent div may remain empty.

View solution in original post

Replies 2 (2)

rashidshamloo
Shopify Partner
1 1 0

This is an accepted solution.

If you want the whole image to show up (not be cut off) you can add "object-fit: contain;" to it.

 

Note:  "object-fit: cover;" scales the image to cover the whole parent div which can result in some part of the image being outside of it. and "object-fit: contain;" makes sure the whole image is visible even though some parts of the parent div may remain empty.

healthjefe
Visitor
2 0 1

Thank you so very much that worked! Sincerely appreciate the response.