@MelvinAguilar
Posted
Hi @FatimaGR ๐, good job for completing this challenge and welcome to the Frontend Mentor Community! ๐
Here are some suggestions to improve your code:
To center the element:
- Use
min-height: 100vh
tobody
instead ofheight: 100%
so that it occupies the full height of the screen. - Add
justify-content: center
andalign-items: center
to body element, these properties will place the card in the center. - Remove
margin: 6% auto;
from thecontainer
selector.
More information:
- The Complete Guide to Centering in CSS
- A Complete Guide to Flexbox (CSS-Tricks)
- How TO - Center Elements Vertically (W3Schools) |
- CSS Layout - Horizontal & Vertical Align (W3Schools)
Try to fix the issues indicated by the report in this solution.
Update the image to make it a bit responsive:
img {
width: 100%;
object-fit: contain;
border-radius: 11px;
}
I hope those tips will help you.
Good Job and happy coding !
Marked as helpful