First Frontend Mentor Challenge using HTML and CSS Flexbox
Design comparison
Solution retrospective
At the beginning I used fixed units for the section and img size (px). It looked good on the desktop version. After I changed the browser width to 576px (for the mobile version) I thought I could do the whole page to be responsive without doing much of changing the media queries, but it did not work as I expected it to be. I tried it with relative units (% and vw, vh), but then the desktop version did not look like how it should look.
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.
HTML:
- The
alt
attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a betteralt
attribute would beQR code to frontendmentor.io
If you want to learn more about the
alt
attribute, you can read this article.CSS:
- Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of
320px
or20rem
to make sure that the component will have a maximum width of320px
on any device, also remove thewidth
property with a percentage value.
- Setting a defined
height
for the card component is not recommended. The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can usemin-height
.
main { background-color: hsl(212, 45%, 89%); /* height: 100vh; */ min-height: 100vh; /* Use min-height insted of height*/ display: flex; /* Add this to center the element instead of using margin: auto*/ align-items: center; justify-content: center; } .qr-section { background-color: hsl(0, 0%, 100%); /* margin: auto; */ /* width: 25%; */ max-width: 20rem; /* Use a defined max-width*/ margin: 1rem; /* Add a margin to add some space for the container card and the screen edge on mobile devices*/ /* height: 80%; */ border-radius: 20px; /* padding-bottom: 10%; */ padding-bottom: 1rem; } @media only screen and (max-width: 576px) .qr-section { /* width: 70%; */ }
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0 - The
- @yanbabagbetoPosted almost 2 years ago
Hi Karin. Congrats for completing the challenge. The overall solution is good. The only improvementn I will suggest is the space between the bottom border and the paragraph.
Good job.
0
Please log in to post a comment
Log in with GitHubJoin 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