Skip to content
Submitted about 3 years ago

Flexbox CSS HTML :hover

Christine C•30
@oemorb
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

Hi everyone,

Thanks for checking my code out! I'm pretty happy about this one.

If possible, I'd like to get some feedback if there's a neater way of making the "Learn More" text in the button have the background of the box and not the actual button.

Also, if there's a neater way of making the border-radius change in the container element, I tried but it didn't have an effect.

xoxo

Christine

Community feedback

  • Carlos•1,110
    @Carlos-A-PPosted about 3 years ago

    Hey Christine,

    • It looks like after the screen reaches 1040px the .container child items each have different widths, you can fix that by adding a max-width to your .container.
    • Your .container should also have a width: -moz-fit-content; along with width: fit-content; which is why the compared images look different. Firefox doesn't support width: fit-content; and needs the prefix.
    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