Skip to content
Submitted 11 months ago

3-column preview card component using flex

mhykah•220
@mhykah-webdev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

A short and simple project after a break. Any feedback is greatly appreciated! I have a few questions:

How can I scroll past my margin in mobile? In some specific display sizes the buttons don't align. How can I fix this? Is there a better way to cleanly sort the colours in css?

Thanks!

Community feedback

  • Marcos Travaglini•4,840
    @BlackpachamamePosted 11 months ago
    • The reason why the margin-button is not seen in the mobile version is because you defined this in your CSS:
    body, html {
     height: 100%;
}

    Because? I don't know, I don't see any use for it in this case.

    • The reason why the buttons do not align on certain screens is because on some the texts of each section have a line more or less compared to the other section. Which makes some of the 'buttons' appear higher than the others. In my case use flex-wrap: wrap to avoid these issues, you can see my solution for guidance (although I use bootstrap, but the classes are understood)
    Marked as helpful
    1
    mhykah•220
    @mhykah-webdevPosted 11 months ago

    @Blackpachamame Thanks for your help! Removing that fixed the scrolling. I ended up simply adjusting the button by using flex-end and that seems to do the trick too.

    1

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