Design comparison
Solution retrospective
I'm proud of using Rem value for everything.
I would use Rem from next time I build a website cause I was having trouble with making it responsive for smaller screen with PX value. After I switch to Rem. It was really easy to make this fit into smaller screen just by changing font size by media queries
What challenges did you encounter, and how did you overcome them?I wanted to center the QR Code in the middle of the grid. I used paragraph and text-align center to center it but It was making some trouble so I used margin: auto
What specific areas of your project would you like help with?I'm wondering if there is a way to improve my code. Is it wise to use Rem for everything including img size, border, padding, margin, body height width?
Community feedback
- @Alex-Archer-IPosted 6 months ago
Hi! it is an interesting approach - to use grid this way. Never seen something like this. That's really cool! Also it is great that you are using css-variables.
By the way, you can use properties "align-items: center" and "justify-items: center" to, well, centralize object inside the grid cell.
As for REM - this is not quite a good practice to use rem in main styles and px in media queries - better stuck with the same value type. Media queries will work even your element have px value initially.
What about rem vs px at all - you can find a lot of articles, posts and opinions advocating one of those values. So, my advice to you - try to train both approaches and with time you'll better understand which useful for which goal. I know, it's kinda a lame advise, but it's better for such controversial topics.
In general - rem used for those parts which can be resized if user change the browser default font size. That's why better to use px for media breakpoints cos screen size will remain still regardless user's settings.
Oh, also - I see you have two width for body - 1440px and 100%. You can freely remove them cos body's width is 100% by default.
Well, hope I told you something useful. Great work! Keep doing!
Marked as helpful1@TwinkleBytePosted 6 months ago@Alex-Archer-I As for align-items and justify-items, well... I was never able to make it work.
Me using rem on main style and px on media queries was oversight on my part. Good job noticing it.
Also width 1440px and 100% part was also a mistake. I didn't notice that. Good catch. Overall good advice. Upvote
0@Alex-Archer-IPosted 6 months ago@LoneBrokeBoy Well specifically in this case you can get rid of grid-templates and leave just display: grid. That way body tag become one big brutal grid cell and all those properties should work correctly.
Something like this:
body { margin: 0; height: 100vh; display: grid; align-items: center; justify-items: center; }
0@TwinkleBytePosted 6 months ago@Alex-Archer-I Thanks. Also, I read how to write feedback article and it said you should use backticks while writing and sharing codes. So yeah, I suggest that you do so. Unless, you already know this. Something like this:
body { margin: 0; height: 100vh; display: grid; align-items: center; justify-items: center; }0@Alex-Archer-IPosted 6 months ago@LoneBrokeBoy Oh, thank you! I guess I missed this part. Well, organization has always been my weak point =)
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