Skip to content
Submitted almost 2 years ago

3 Column using HTML & CSS

CompetentKoala•30
@CompetentKoala
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Clifford Anderson•200
    @cdanderson76

    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

    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 :)

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