Skip to content
Submitted 5 months ago

used some flex-box and basics css

Alizon Kingslen•70
@KINZEE97
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Maryana Rigo•10
    @mary-rschPosted 5 months ago

    In general the page looks good, as expected.

    I'll comment about accessibility. When it comes to other devices, such as mobile, or other browsers, using the unit (px) may not be the best choice, only in cases of fixed-sized elements; use px for elements that require fixed dimensions and do not need to scale with the base font size or viewport. (borders and some shadow effects are typically specified in px for precise control over their appearance).

    I recommend you the (rem) unit. Rem units are relative to the root element's (<html>) font size. This means that if the root font size changes (via media queries or user settings), all rem-based sizes will adjust proportionally; Users can adjust their browser's default font size for readability. rem units respect these settings, making your design more accessible by scaling elements proportionally.

    1 REM = 16 PX

    Converter HERE

    Resuming, while both px and rem have their uses, rem units are generally preferred for creating flexible, scalable, and accessible web designs. They simplify responsive design efforts, improve accessibility, and enhance maintainability by ensuring consistent sizing relative to the root font size. For modern web development, rem units offer a robust solution to meet the demands of responsive and accessible design practices.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord