@GioCura
Posted
Hi 👋 If you want the image to resize according to the size of its parent container, give the image a width: 100%. In your project's case, you'll have to add padding to the sides afterwards. Keep in mind that the card itself must have a set width for this to work.
As for centering the card, I prefer giving the the html and body a height of 100%, and then setting the body to display: flex, with justify-content: center, and align-items: center. You don't need to set the card as an absolutely positioned item anymore.
Hope this helps!
Marked as helpful
@PipouwPieuw
Posted
@GioCura Hello! This is on point, except I would use min-height: 100vh instead of height: 100% on the body. This way the body is at least as tall as the screen but could get taller if necessary, thus avoiding clipping its content. 😄
@GioCura
Posted
@PipouwPieuw Thanks! I'll try using min-height on the body from from now on.
@Aibi-Green
Posted
@GioCura Thanks for the help! I set the image width to 100% and added padding, although that at first didn't work since the image was going beyond the container's borders so I also added the property box-sizing: border-box to prevent the image from doing that and that worked greatly. As for the card, adding display flex, justify-content, and align items really did the job.
@GioCura
Posted
@Aibi-Green That's good! I forgot to tell you about box-sizing. At the beginning of a project, it's good practice to universally (*) set that to border-box, along with margin: 0 and padding: 0. So, at the top of your stylesheet:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
You then won't have to manually set it for every element.
margin: 0 and padding: 0 resets any default spacing values that elements have (ex. <body> has margin: 8px by default). This way, you will be in total control of them.
Good luck on your next challenges!
Marked as helpful
@Aibi-Green
Posted
@GioCura Great advice! I applied this on my current challenge and it definitely is more easier to manage each elements margin and padding.
