This looks great overall, but there is one problem for me viewing on my phone.
The top of the content is cut off for me because you've set the html and body to be height 100%. I'll add Screenshots to discord so you can see this - it gets really bad for those who enlarge text size too. Remove html from that line of the reset and the bug will be fixed. It does not need to be height 100%.
I also recommend you use the flex column approach for centering components like this in the viewport. The grid place-content center approach can cause content to overflow on the left for users who need a large text size.
You should be setting the componentax width in rem. And the media query must be defined in rem or em. These changes would allow the layout to scale properly for those of us with larger text sizes.
Last thing I noticed was that letter spacing was in px. It's usually better to use em for this so it scales with the text size on the same element.
Marked as helpful
@Shahzaib-ur-Rehman
Posted
Thank you so much for your time and valuable suggestions! I'm committed to incorporating all your insightful advice into my future projects. Much appreciated, Grace!
