Frontend Mentor | mobile-kit QR code component coding challenge solution

Community feedback

@PhoenixDev22

Posted 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

PhoenixDev22• 16,950

@PhoenixDev22

Posted 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.

vcodey• 270

@v-codey

Posted 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.

mobile-kit QR code component

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community