@ecemgo
Posted
Some recommendations regarding your code that could be of interest to you.
- In order to center the card correctly, you'd better add flexbox and
min-height: 100vh
to thebody
- For the color of the screen, you can use the recommended color in the
body
body {
/* background-color: hsl(220, 15%, 80%); */
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
- If you use flexbox in the
body
, you don't need to use flexbox andmargin
in the.container
to center the card - If you use
max-width
instead ofwidth
, the card will be responsive - You'd better give specific
padding
instead ofauto
and reduce the width of the card
.container {
background-color: white;
/* display: flex; */
/* flex-direction: column; */
/* width: 350px; */
max-width: 300px;
/* margin: 3.5rem auto; */
/* padding: auto; */
padding: 15px;
/* align-items: center; */
border-radius: 0.5rem;
}
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add
width: 100%
anddisplay: block
for the img in this way:
img {
/* width: 330px; */
width: 100%;
display: block;
/* margin-top: 10px; */
border-radius: 0.5rem;
}
- Finally, if you update your code like the above, the card will be responsive so you don't need to use media queries for this solution. You can delete it.
Hope I am helpful. :)
Marked as helpful
@jhkuah
Posted
@ecemgo
Thanks so much for the feedback!
I'm able to reduce the amount of lines in my CSS file, but may I know how why display: block
and width : 100%
is being used or how it helps to stay in position within the card?
EDIT: I found my answer, just to make sure I understand, width : 100%
takes up the full width of my parent container, which is .container
, and because I have set in .container
with padding: 15px
, it looks centered?
@ecemgo
Posted
@jhkuah definitely, that is right👍by the way, it's important to clean the code and I'm happy to help 🤗