Skip to content
Submitted over 2 years ago

mobile-kit QR code component

vcodey•270
@v-codey
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

  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Hello @v-codey ,

    You are welcome.

    The difference is following. width keeps the size of the object stable. Lets say you put width: 700px for an image. When you re-size you screen the image stays stably 700px. Lets say you on a mobile phone and its screen width is less then 700px the image will not fit in the screen. So it will stretch out your page and make it not mobile friendly. At the same time, when you set max-width:700px it will re-size up to 700px but when the screen goes smaller and the images doesn't fit in the screen it will automatically re-size it to fit the screen.

    Hopefully this helps to make clear .

    Marked as helpful
    1
  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Greeting @v-codey,

    I have few suggestions regarding your solution:

    • Use a landmark main to wrap the<body>content (which will be the card )a footer (which will be the attribution).<Footer> should be outside the`` <main >` You can read more about "HTML5 landmark elements are used to improve navigation" .

    • Page should contain a level-one heading . you can use <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

    • width: 320px;an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

    • Use min-height: 100vh; instead of height: calc(100vh - 1px);/using vh (viewport height) units allows the body to to grow taller if the content outgrows the visible page./

    • It's not recommended to use px for font size . Using px won't allow the user to control the font size based on their needs.

    Overall , your solution is good.Hopefully this feedback helps.

    1
    vcodey•270
    @v-codeyPosted over 2 years ago

    @PhoenixDev22 Thank you so much for your valuable feedback

    • I am just a newbie trying to learn (and a whole lot of things yet to learn). this was my first ever frontend mentor challange,
    • However about width: ABC px; we should not use hardcoded width I understood that but instead you suggested that to use max-width instead. I'll be glad if you can enlighten me about this thing.
    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