@correlucas
Posted
πΎHello Borcho, congratulations for your new solution!
1.Add min-height: 100vh;
and display: flex; align-items: center; justify-content: center;
to make your component have the proper vertical alignment:
body {
min-height: 100vh;
padding: 0;
margin: 0;
font-family: Inter, sans-serif;
background: var(--body-bg);
display: flex;
align-items: center;
justify-content: center;
}
2.You need to fix the container size
that is a bit off, this challenge uses the standard container size that is max-width: 1110px
.
3.To make the image have a better fit inside of it, make the component image responsive with display: block
and max-width: 100%
(this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover
.
img {
display: block;
object-fit: cover;
max-width: 100%;
}
βοΈ I hope this helps you and happy coding!
Marked as helpful