hi there! ✌️
Couple of tips:
HTML:
- all HTML document should include one h1 element (but not two or three. only one)
CSS:
- basically you don't need to specify the width of your elements. containers will adapt to their content by default. you can use
max-widthto determine the maximum width of your element. you can even combine it withwidth:
.element {
width: 90%;
max-width: 40ch;
}
in this case the element will take up 90% of its container's width, but when it reaches 40ch it won't expand above that.
- you're still mixing pixels and relative units, get used to using relative units all around your CSS, especially don't use pixels for the font size.
Hope this was helpful 🙏
Good luck and happy coding! 💪
Marked as helpful
@AlexSG29
Posted
@kodan96 Thank you very much for the feedback, I am still learning how to use the rem, I understand that it adapts according to the size of the screen.
html { font-size: 16px; /* 1rem = 16px */ }
body { font-size: 1rem; /* 16px */ margin: 2rem; /* 32px */ }
I certainly hope that future designs have better management of dimensions
@AlexSG29
You're right with the math, but there's no need to apply that font-size to the html tag, 16px is the default font size in browsers. apply font-size to the html tag only if you want to modify the default.
and no, rem won't adapt to the screen size. only if you modify the font-size property in your @media queries. if you want dynamic typography, that's actually adapts to the screen size automatically you need to use the clamp() CSS function
Marked as helpful
