@nadezhda-frunza
Posted
Congratulations on completing the challenge, well done!
What is the reason of your issue?
It was likely because you used fixed-size units (px) for the font size. When you use fixed-size units like px, the text does not respond to changes in viewport dimensions or user preferences. This can result in inconsistent font sizes on different screens.
Why <div> fixed this?
When you use a <div>, it's a generic container element without any inherent styling. You can apply CSS styles to a <div> exactly as you want, including setting a specific font size using any unit of your choice (such as rem, em, or %). Headings like <h2> come with default browser styles, so these styles can be different across different browsers.
How to solve this?
So if you want to still use semantic HTML (<h2>), you can switch to relative units like "rem" for font sizes. This will help you to achieve more consistent and responsive design. Also adding min-height: 100vh; to the body is a good practice.
Hope it helps!
