Flexbox, media query, css variable

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted almost 3 years ago

  Hi Ken,

  Congratulation on completing this challenge. Excellent work! I have some suggestions regarding your solution if you don’t mind:

  • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>with sr-only class hidden visually and present for assistive tech users.

  • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor.

  • Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  Hopefully this feedback helps.

  01

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  Hello Ken, congratulations for this solution!

  Answering your question:

  In this solution you don't really need media queries since the card doesn't change too much, all you need to do is to make the card and the image responsive. To do that you need to make the card have a maximum size but also the ability to contract its size and also its content using max-width: 320px.

  To make the image responsive and resizing with the card size use display: block and max-width: 100% to make the qrcode image have the card with automatically.

  And that's it, no need for media queries.

  If you’re not familiar to media queries and responsivity, here’s a good resource to learn it:https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  Hope this helps, happy coding

  01

  Marked as helpful