Semantic HTML5, markup CSS custom properties and Mobile-first workflow
Design comparison
Solution retrospective
One thing I found difficult in this challenge is media queries
Any feedback on how I can improve?
Community feedback
- @correlucasPosted about 2 years ago
๐พHi @Abiodun1Omoogun, congratulations on your first solution!๐ Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw youโre on the right track. Iโve few suggestions for you that you can consider adding to your code:
- Add the correct size to avoid the container growing more than it should. In this case the QR CODE component size is
max-width: 320px
. - Youโve used
px
as the unit for sizes but the problem with pixels is that it is not optimized for multiple devices and screens. So a good fit is to userem
orem
that have better performance and make your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well. - Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
- Reduce your code putting all content inside only one div.
โ๏ธ I hope this helps you and happy coding!
Marked as helpful1 - Add the correct size to avoid the container growing more than it should. In this case the QR CODE component size is
- @faha1999Posted about 2 years ago
Hello, Emmanuel Omoogun Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:
- add the below code to the
body
. It will center everything
body { justify-content: center; align-items: center; display: flex; min-height: 100vh; flex-direction: column; }
- add the below code to the
main
. It will center everything
main{ max-width: 340px; padding: 1.2rem; } h1 { font-size: 1.4rem; font-weight: bold; margin-bottom: 1rem; } p{ font-size: 1rem; }
-
**Remove all
transform, width, height
frommain
. -
No media query is required for this project.
I hope it will work. Happy coding.
Marked as helpful1@Abiodun1OmoogunPosted about 2 years ago@faha1999 so I need to delete all the media queries
0 - add the below code to the
- @Fola-JoePosted about 2 years ago
Well done on your first project on Frontend Mentor ๐๐ Just make a little adjustment to your css code. First, set your main width to a definite value rather than using percentage
main { max-width: 370px; }
You could as well not give the 'main' selector a 'height' property, but edit your body height to min-height and not max-height. I hope this helps! Happy coding!
Marked as helpful1 - @nzewiPosted about 2 years ago
Congrats on completing your first challenge Emmanuel
You have a great solution there
Here are my suggestions for you:
1.You don't need media queries to make this challenge responsive. If you follow responsive design principles, it would be enough. I would recommend this [course] (https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts/)
2.Using relative units like
rem
andem
instead ofpx
would make your site more responsive. Learn about them and use them in your next project.3.You can center your card by doing this
main { display: flex; justify-content: center; align-items: center; }
4.I noticed you made your
h1
andp
flex containers, wrapped your image in a<section>
tag and used a<br>
tag in your<h1>
. Doing these are not necessary as you can achieve your solution without them.I hope this helps
Marked as helpful1
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