Design comparison
Solution retrospective
I couldn't for the life of me figure out how to get the boxes to stack on top of each other in mobile display.
I know I am doing something wrong with placement of items inside the grid/flexboxes. If anyone knows how i could do this better let me know :)
it looks good. just isn't good for mobile.
Community feedback
- @cdanderson76Posted about 1 year ago
I agree with the previous comment. This project looks really good, but I'd just add the media query in CSS and use the 'flexbox-direction' property with the attribute of 'column (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction). Afterward, adjust margins and gaps as needed. I had this same issue, but with the desktop layout, so I had to use the media query and 'flex-direction' property with the attribute of 'row'. You can find good information on media queries here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Happy coding :)
0 - @danemaasPosted about 1 year ago
what i would do here is create a media query for mobile screen and with your .card-box you can flex-direction: column.. it should position your boxes in column. just adjust the gaps on it and its good. hope this helps :)
0
Please log in to post a comment
Log in with GitHub
Join 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