I need help! I'm trying to center an image split into 6 equal parts on the page, but it's coming out squashed. I think the issue is that the images are appearing square instead of rectangles, but I can't figure out why.
Any assistance would be appreciated. Thank you!
I've provided the link below: Link
HTML
<ul class="cards">
<li class="cards__axis">
<figure class="cards__front">
<img src="image-link-here" alt="" />
</figure>
<figure class="cards__back">
<img src="image-link-here" alt="" />
<figcaption class="cards__description--back">
<p>ABOUT</p>
</figcaption>
</figure>
</li>
…
CSS
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #333;
font-family: 'Georgia', sans-serif;
}
…