Hey there @carstenkoerner! 👋 Here are some suggestions to help improve your code:
-
Reset Margins and Padding:
* { margin: 0; padding: 0; }
-
Consistent Box-Sizing Model:
*, *::before, *::after { box-sizing: inherit; }
By setting
box-sizing: inherit;
for all elements and pseudo-elements, the box model remains consistent throughout the document. Then, settingbox-sizing: border-box;
onhtml
ensures that all widths and heights include borders and padding, simplifying the calculation of element dimensions. -
Set Base Font Size:
html { box-sizing: border-box; font-size: 62.5%; }
Setting the base font size to
62.5%
onhtml
makes text size calculations easier. Since62.5%
of the default16px
font size equals10px
,1rem
equals10px
, simplifying conversions between relative (rem
) and absolute (px
) units. For example,1.6rem
equals16px
, which is more intuitive than working with text sizes based on a default16px
base size. -
Ensure Full Viewport Height:
body { min-height: 100vh; }
By setting
min-height: 100vh;
, the body of the document covers at least the viewport height, which is especially useful for "hero" layouts or ensuring the footer remains at the bottom of the page.
-
Font Size Adaptability: Consider using the
clamp()
function for more adaptive font sizes. It allows you to set a range of acceptable font sizes based on viewport dimensions, ensuring better readability across devices. -
Image Positioning in Header: You mentioned struggling with image positioning in the header. I used absolute positioning with negative left and right values. You can refer to my code for a detailed implementation of this solution.
<Happy Coding/>! 👾