Vue.js Component Solution w/ Flex

Community feedback

• 

  Michael Godfrey•340

  @michagodfreyPosted over 2 years ago

  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

  0

  ---

  

  raionus•310

  @sinjin25Posted over 2 years ago

  @michagodfrey

  I'm seeing now that the space between the svg + title and the title + body text is about uniform. I must've not been thinking well to have missed that.

  Thank you for the accessibility tip. I'm getting more of those than most submissions so I'll have to do some research on them.

  Thank you for the feedback and good luck on your stuff :)

  1

  

  Michael Godfrey•340

  @michagodfreyPosted over 2 years ago

  Thank you @sinjin25 good luck on your work too. From practicing on this site I've realized always have a h1 (but you can make it invisible to users), and have everything in a <main> or <header>, <footer> etc. Do that on this project and you'll have 0 accessibility issues.

  1