@joshdail
Posted
Nice job!
From what I can tell, your project is fine as far as appearing correctly on desktop and mobile. One good thing is that you are using rem for font sizes and not pixels. That can be important also for accessibility. Also, I see you are using CSS custom properties which are very helpful for responsive design.
As far as responsive design for desktop/tablet/mobile, I generally will use media queries for different screen sizes. So I might have @media (width < some_width) for mobile, then another for tablet size, and so on. I will use Chrome or Firefox Devtools to see where the app starts to break or look incorrect at a certain width, and use that as a basis for where to switch from desktop to tablet or mobile.
Using Flexbox and Grid for your page layouts is also great for responsiveness, since for Flexbox you can change rows to columns as the screen shrinks, and with Grid you can change the rows and columns as needed to fit different sizes.
Kevin Powell has a great Youtube channel and also a free course on responsive design on his website https://www.kevinpowell.co, you may find that helpful
Marked as helpful
