H1 smaller than H2 when resizing browser

HTML/CSS
1

Hey guys! Can anyone help me out with this issue?
Whenever I resize the browser my h1 Heading becomes smaller than my h2. What am I doing wrong?

Here’s my markup and stylesheet:

Document

Heading 1

Heading 2

Heading 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis adipisci accusamus eligendi dolores distinctio aut nostrum, exercitationem quo consequatur officia!

:root {
–color-primary: #2584ff;
–color-secondary: #00d9ff;
–color-accent: #ff3400;
–color-headings: #1b0760;
–color-body: #918ca4;
}
html {
/* 62.5% of 16px = 10px */
font-size: 62.5%;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 2.4rem;
line-height: 1.5;
color: var(–color-body);
}

h1,
h2,
h3 {
color: var(–color-headings);
margin-bottom: 1rem;
}
h1 {
font-size: 7rem;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 3rem;
}
p {
margin-top: 0;
}
@media screen and (min-width: 1024px) {
body {
font-size: 1.8rem;
}

 h1 {
  font-size: 8rem;
}
 h2 {
  font-size: 4rem;
}
 h3 {
  font-size: 2.4rem;
}

}

2

Refresh your browser or close and reopen your browser and start the live server again, there nothing wrong with your code

1 Like
3

Thank you so much! Will try it now