Responsive 3-column preview card using CSS flexbox
Design comparison
Solution retrospective
I used relative units and somehow still don't get responsive display on tablets. A feedback on what I did wrong is welcome. Thank you.
Community feedback
- @correlucasPosted over 2 years ago
Hey Akanni, how are you? Congratulations for your solution!
Answering your question, you can make your code responsive using media queries, you can set breakpoints for the page, for example when you page reach the width of 700px you can set that the flex column instead of vertical become horizontally. You just need to set a media query like I'll write in the following example:
Example:
@media (max-width: 800px) {.container { flex-direction: column; } }
You can try that and say me if works to make the cards get the vertical direction after the width of 700 pixels.
Here you can understand how media queries work:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Marked as helpful2@Feyisara2306Posted over 2 years ago@correlucas I will check out the link, thank you very much!
0 - @meistensPosted over 2 years ago
Recheck your css code, seeing some errors
@media screen and (max-width: 375px){ .container{ display: flex; flex-direction: column; width: 90%; padding: 1em; }
Above should be min-width: 375px, not max-width, I'm getting a desktop design on my device plus I feel your question would be answered if you added a breakpoint like this
@media screen and (min-width: 375px) and (max-width: 767px){ ...styles }
Marked as helpful1
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