@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
min-height: 100vh
to thebody
- For the color of the screen, you can use the recommended color in the
body
body {
/* background: #bcc7eb; */
/* width: 100%; */
/* height: 100vh; */
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
}
- If you use flexbox in the
body
, you don't need to use flexbox in the.container
to center the card - If you use
max-width
instead ofwidth
, the card will be responsive.
.container {
/* background: #e6f0ff; */
background: white;
padding: 15px;
border-radius: 10px;
/* width: 350px; */
max-width: 350px;
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* flex-direction: column; */
}
- 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:
.card-img img {
border-radius: 10px;
/* margin-bottom: 22px; */
width: 100%;
display: block;
}
- Finally, you can add these styles to the
h2
h2 {
margin: 30px 0;
text-align: center;
}
Hope I am helpful. :)
Marked as helpful