Why is the @media screen CSS not working?-CodePudding

I want to make some changes to the website on devices with the minimum width of 1024px but it's not working and I can't figure out why.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moshify Project</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus earum
      architecto veritatis dignissimos cum, vitae cupiditate accusamus facilis!
      Est, distinctio.
    </p>
  </body>
</html>

CSS:

html {
  font-size: 62.5%;
}

:root {
  --color-primary: #2584ff;
  --color-secondary: #00d9ff;
  --color-accent: #ff3400;
  --color-headings: #1b0760;
  --color-body: #918ca4;
}

body {
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--color-body);
  font-size: 2.4rem;
  line-height: 1.5;
}

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;
  }
}

CodePudding user response：

Can you check if you have imported your CSS file to your html file or not? That could be a reason. else you can try adding only as follows:

@media only screen and (min-width: 1024px){
}

CodePudding user response：

It appears you want the @media only to work when the screen reaches a (max-width: 1024px) The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specific styles

@media only screen and (max-width: 1024px) {
  body {
    font-size: 1.8rem;
  }


  h1 {
    font-size: 8rem;
  }

  h2 {
    font-size: 4rem;
  }

   

  h3 {
    font-size: 2.4rem;
  }
}