Design comparison
Solution retrospective
I think i can't make it responsive........
Community feedback
- @atmahanaPosted about 1 year ago
Hey there. That is a good progress.
You are using
flex
which is a good start for a responsive layout. The reason of why the cards are not placed in the center because you kind of reset the flex state of the parent element withdisplay: block
on mobile screen.@media(max-width:700px){ .main{ display:block; } }
I believe you want to make the cards direction vertical instead of horizontal. You can achieve it by:
@media(max-width:700px){ .main{ flex-direction: column } }
With
flex-direction
you can change the direction of the flex items in the flex container either torow
orcolumn
. If you want to know more about flexbox, you can read it here. Kevin Powell also covered up this topic in his videoMarked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord