Flex, html5

Community feedback

• 

  David Bedford•180

  @djbedfordPosted about 2 years ago

  I think your design looks great, and the font size/positioning is pretty spot on as it is, at least to the point where nobody should say anything about it. If you did however want to play around with the text either in the future or on this project you could maybe take a look at these CSS properties

  • letter spacing (https://css-tricks.com/almanac/properties/l/letter-spacing/)
  • line height (https://css-tricks.com/almanac/properties/l/line-height/) These properties should give you finer control over the font to achieve what you were looking for.

  Marked as helpful

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Chris! 👋

  When completing challenges, I recommend avoiding focusing on chasing pixel perfection. It's impossible to create pixel perfect website. Every device's pixel is different. So, it is not possible to create a pixel-perfect website.

  Instead, focus on quality by testing with keyboards, zoom, and screenreaders. Also, I recommend visiting Solid Start website. It gives you an overview of web accessibility.

  Here are some suggestions for improvements.

  • There's no need to wrap the img with a div.
  • I suggest making the img as a block element (display: block) to make it easier to work with img element.
  • The alternative text of the QR code should give some information about the QR code. For example, "QR code to frontendmentor.io".
  • Specify the font-size on the body element instead on the html element.
  • It's best to never style html element. Use body element as the main element for the website.
  • Also, use rem unit for the font-size. px won't adapt when the users change the font size through the browser's setting.
  • The .card only needs a max-width to be responsive. So, remove the width.
  • I recommend making the body element as the flex container of the card. This way, the .card will be on the main element. This way, there's no need for an extra div.

  I hope this helps! Happy coding!

  Marked as helpful

  1