Ecem Gokdogan• 9,380
@ecemgo
Posted
Some recommendations regarding your code that could be of interest to you.
- It would be better if you give the properties to the
body
instead of the.container
.
body {
background-color: #d5e1ef;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
- If you use
max-width
, the card will be responsive - You'd better update
padding
in this way:
.box {
background-color: #fff;
padding: 15px;
/* padding: 5px; */
/* padding-top: 15px; */
/* padding-bottom: 35px; */
/* margin: 0px; */
border-radius: 15px;
max-width: 300px;
text-align: center;
}
- 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;
to the img.
img {
/* width: 270px; */
width: 100%;
display: block;
/* height: 270px; */
/* margin: 0px; */
/* padding: 0; */
/* border-radius: 15px; */
/* margin-bottom: 10px; */
}
- You need to update font-size of text as rem or px instead of vw because they aren't visible when it is responsive
h3 {
/* font-size: 1.5vw; */
font-size: 1.5rem;
}
p {
/* font-size: 1vw; */
font-size: 1rem;
}
- You don't need to use
.container
anymore and you can remove it to avoid repetition
/* .container {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
} */
Hope I am helpful. :)
Marked as helpful
1