I recently implemented the 62.5% trick to adjust my font-size for various screen sizes. However, I noticed that on larger screens, the text appears too small. To address this, I tried increasing the font-size to 80% using a min-width media query. Unfortunately, it seems like my approach is not working as expected. Can anyone spot what I may be doing wrong?
The issue is occurring within a _themes.scss file as I work with Sass.
edit: Upon inspecting the code, I observed that the media query is being crossed out with an error message stating "unknown property name".
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
@media screen and (min-width: 1600px) {
font-size: 80%;
}
}
html,
body {
overflow-x: hidden;
}
body {
font-family: 'Poppins', Avenir, Helvetica, Arial, sans-serif;
color: hsl(0, 0%, 100%);
text-align: center;
font-size: 1.6rem;
min-height: 100vh;
}