Skip to content
Submitted almost 3 years ago

Vue.js Component Solution w/ Flex

vue
raionus•370
@sinjin25
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is there a better way of making these components match the design beside using hardcoded widths/heights for the containers?

Code

Please log in to post a comment

Log in

Community feedback

  • Michael Godfrey•340
    @michagodfrey

    Hi ralonus, Solid effort here! Answering your question, the way I did it was with padding inside the card and margins of the cards' child elements. It's a bit of trial and error, but I think it results in something that is easier to style and still ends up being close enough to the design.

    My solution is linked below, I hope it's helpful

    https://www.frontendmentor.io/solutions/3column-preview-card-component-dq4M7vC5j

    P.S. A nice little trick to deal with the h1 accessibility error is this h1 { font-size: 0px } I just learned it and it clears up that error without displaying on your live site.

    Marked as helpful

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