I really like the way you structured your html. The comments also gave some insight to why you made the decisions you did. The aria labels are extra thoughtful for the users who need them.
I think your css was easy to follow. I personally would choose rem units for spacing in this project. You have a root font-size that changes across mobile to desktop view. Rem units will scale and provide a uniform look and change.
The responsiveness at smallest devices could use a little adjustment. I used google chromes dev tools. All your content is displayed, you're just losing the left and right margin. Overall this is fantastic, and I look forward to using some of your ideas in my future projects!
Marked as helpful
@iddahadev
Posted
@jdgarcia277 Thanks for the feedback, I appreciate it!
I used rem spacing for gaps and margins, but px for padding (to save horizontal space if the user zooms in or changes the font size to a larger one).
I fixed the responsiveness, I added padding for the main element.
Because of the shadow on the right, I might increase the padding-right to even things out.
