Submitted 10 months ago

3 Column using HTML & CSS

CompetentKoala• 30

@CompetentKoala

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Clifford Anderson• 180

@cdanderson76

Posted 10 months 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 :)

danemaas• 520

@danemaas

Posted 10 months 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 :)

Please log in to post a comment

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