The mobile version looks good. However, the desktop version has some issues with the size proportions – it appears too large. Here are a few suggestions for improvement:
-
CSS Reset: Implementing a CSS reset might be beneficial to set margin and padding to zero and use box-sizing: border-box. This ensures a consistent layout across different browsers.
-
Font-Size: The font-size is set to 16px in :root. Instead, you could use html { font-size: 62.5%; } which makes calculations for rem values easier – 10px will equal 1rem, simplifying the math.
-
Image Sizes: For images, consider using srcset or the picture element to handle different screen sizes. This allows you to optimize images based on max-width or min-width of the viewport, improving performance and responsiveness.
