CSS Flexbox, media query

Community feedback

• 

  NeonCodes•30

  @NeonCodesPosted 2 months ago

  Hello, Good job completing the challenge! The design is pretty close to the original.

  First, the positive:

  • Your code is very concise and well-organized so we don't get lost while reading it (special mention for the #description selectors and @media in the stylesheet)
  • Didn't know font-optical-sizing existed, that's nice.
  • The card is well-centered and sized with flexbox.

  Second, potential area of improvement:

  • The h1 seems slightly too big. You can try font-size:22px( or convert them to rem using a converter like Calculatorway)

  I hope it helps. Happy Coding!

  0
• 

  Kitalphar•150

  @KitalpharPosted 3 months ago

  Great work!

  Due to having used vw units for the container width the container grows wider than probably intended, but it did gave me the idea of maybe using the resize CSS property, or adding an option to enlarge the image on hover. In the future in case on the design i'm working on the image is small it could help the camera pick the QR code up better. Just food for thought...

  0
• 

  Mai Starberries•80

  @starberriesPosted 3 months ago

  Hey @Perry2004, great work! I learned a few interesting things about font properties from looking through your styling, I didn't even know font-optical-sizing was an available property, so that's really cool.

  I did notice your container size has a lot of variability based on screen size. If you're interested in giving it a more controlled size range, I can suggest using max-width in place of width and utilizing rem units for measurement. Here's how I set up the container size for mine if you'd like a comparison:

  .container {
      max-width:20rem;
      min-height: 31rem;
  }
  

  If you need any info on rem and em, I myself was just recommended this page on the subject, but essentially rem units are based on the root font size, so 1rem by default would be 16px.

  Anyway, great work with the challenge, keep it up!

  0