QR code component using flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hello

  The card is cut off for me on mobile - in portrait mode it nearly fits on my screen but in landscape the code is cut in half. There are a few other issues too but hopefully the feedback will help

  • change height 95vh to min-height. This is what’s causing content to be cropped, because setting an explicit value won’t allow the main to grow if/when it needs to
  • this challenge doesn’t need a media query at all. Instead, lose the min-width on the card (no need for that either) and give it a max-width in px/rem so it can only grow up to a certain point
  • similarly, instead of setting a width 90% on the card, just give it a little margin so it can’t hit screen edges (or give the body some padding. This will prevent the current issue where it hits the top of the screen on mobile while still only writing 1 line of css
  • most important content on this whole page is the image. The alt text needs rewriting so it is valuable. You don’t need words like “picture” or “image” in an alt attribute as it is already an img tag. Instead add value with something like “QR code to frontEndMentor.io”
  • the footer attribution is overlapping the card on mobile because of the absolute positioning. I would just let it sit below the card.

  I hope this is all useful

  Marked as helpful

  2

  ---

  

  Najeeb Anwari•300

  @najeeb-anwariPosted over 2 years ago

  @grace-snow . Absolutely useful. I fixed all of the bugs. Thanks for the help.

  0