@ecemgo
Posted
Some recommendations regarding your code that could be of interest to you.
- If you use flexbox in the
body
, you don't need to use flexbox in themain
to center the card because it doesn't work. You'd better try to avoid repetition. - If you use
max-width
instead ofwidth
, it makes the card responsive
main {
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* width: 320px; */
max-width: 320px;
}
- 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 {
border-radius: 10px;
width: 100%;
display: block;
}
Hope I am helpful. :)
Marked as helpful