@media query not responding for tablet and desktop view-CodePudding

css code.

               /* media query for tablet */
               @media only screen and (max-width: 768px) {
               .cta {
               font-size: 2.5rem;
               padding: 20px 60px;
               }
               h1 .section-title {
               font-size: 6rem;
               }

               /* hero section */
               #hero h1 {
               font-size: 7rem;
               }
               /* end of hero section */

               /* service section */
               #services .service-bottom .services-item {
               flex-basis: 45%;
               margin: 2.5%;
               }
               /* end of service section */
               }
               /* end of media query for tablet */

               /* media query for desktop */
               @media only screen and (min-width: 1500px) {
               /* header */
               #header .hamburger {
                  display: none;
               }
               /* end of header */
               }
               /* end of media query for desktop */

html code

                 !DOCTYPE html>
                 <html lang="en">
                 <head>
                 <meta charset="UTF-8" />
                 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                  <link rel="stylesheet" href="style.css" />
                  <title>My Website</title>
                 </head>
<body>
<!-- header section -->
<section id="header">
  <div class="header container">
    <div class="nav-bar">
      <div class="brand">
        <a href="#hero">
          <h1>HOME OF TECHNOLOGY.</h1>
        </a>
      </div>
      <div class="nav-list">
        <div class="hamburger"><div class="bar"></div></div>
        <ul>
          <li><a href="#" data-after="Home">Home</a></li>
          <li><a href="#" data-after="Services">Services</a></li>
          <li><a href="#" data-after="Projects">Projects</a></li>
          <li><a href="#" data-after="About us">About Us</a></li>
          <li><a href="#" data-after="Contact Us">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>
<!-- end of header section -->

My media query for tablet and desktop is not responding though I have no code errors in vscode. I designed phone version first, then media query for tablet and lastly media query for desktop and both are not responding. My media query is below the keyframes.

CodePudding user response：

Try this: @media screen and (max-width: 768px){

}

CodePudding user response：

Please take a look for these sizes

https://getbootstrap.com/docs/4.1/layout/overview/

CodePudding user response：

I guess you have problem in understanding of css selectors, for example, css code

#hero h1 {
    font-size: 7rem;
}

Changes <h1> tag's css, which is child of some tag with id="hero", but in your HTML code you have

<a href="#hero">
    <h1>HOME OF TECHNOLOGY.</h1>
</a>

Which defines <a> tag with link #hero, not id attribute.