1:1 Ratio for Images - Featured Collection Section - Dawn Theme

Store Design
, , ,
1

Hello,

Updated to latest Dawn. I need some help with my code. I need the img’s to be centered. Thanks!

img {
height: 100%;
width: 100%;
display: block;
margin: 0 auto;
padding: 5px;
}

Featured Collection - Img Off Center
Featured Collection - Img Off Center2880×854 286 KB

2

Hi @GUUDS ,

Please provide your website so we can provide a code specific for you

3

Try this code:

.product-single__media-wrapper img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
4

@made4Uo Sent in DM

@NomtechSolution Incorrect reference, it didn’t effect that section. img works though.

5
6

Hi @GUUDS ,

You can fix the image by using the code below.

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the base.css file
  3. Add the code below at the very end of the file
.card__media .media.media--transparent img {
    width: 100% !important;
    object-fit: contain;
}
2 Likes
7

I used it in the custom css section on Dawn, & it worked great.

If I could ask for one more - on product pages, how can I do the same thing? 1:1 ratio without cropping with proper spacing between photos. Please let me know, thank you.