Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 Column using HTML & CSS

@CompetentKoala

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • 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

P

@cdanderson76

Posted

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
danemaas 520

@danemaas

Posted

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
Discord logo

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