@Alex-Archer-I
Posted
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 helpful
@LoneBrokeBoy
Posted
@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
@Alex-Archer-I
Posted
@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; }
@LoneBrokeBoy
Posted
@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; }
@Alex-Archer-I
Posted
@LoneBrokeBoy Oh, thank you! I guess I missed this part. Well, organization has always been my weak point =)
