Design comparison
Solution retrospective
Responsive QR Code Website that i made using HTML & CSS
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there ๐. Good job on completing the challenge !
I have other suggestions about your code that might interest you.
Alt text ๐ท:
- The
alt
attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.
-
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 ๐จ:
-
Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
2 - The
- @HassiaiPosted almost 2 years ago
To center .main-qr on the page using flexbox, replace the height in the body with min-height: 100vh.
There is no need to give .main-qr a margin value and a height value. for a responsive content , replace the width in .main-qr with max-width .
max-width: 285px
.Give the img a max-width of 100% and a border-radius value, the rest are not needed.
Give .text a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
1
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