Submitted 6 months ago
Four Card Feature Section. Mobile First. Flex Box. @media at 800px.
@GD-neo
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
- I am getting better at using CSS selectors. Feeling like I am making progress
- I used a mobile first approach using flex box so I used
flex-direction: column
and then at@media (min-width: 1100px)
changed toflex-direction: row
. - It felt like the column structure made the screen look somewhat empty while the width was > 800px.
- I moved to
@media(min-width: 800px)
but addedflex-wrap: wrap
which let the last card move to a new row while keeping the others on one line so the screen doesn't feel empty when changing from column to row structure (or the other way around)
- Any feedback and ideas for improvement are welcome - really helps a lot :D
Community feedback
- @ana-lsmPosted 6 months ago
A tip for setting the image at the end, is:
img { display: block; margin-left: auto; }
0
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