Shopify themes, liquid, logos, and UX
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).
Solved! Go to the solution
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.
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.
Thank you so very much that worked! Sincerely appreciate the response.
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025