My media query not working

<!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"

    />

    <title>frontend html</title>

    <link rel="stylesheet" href="css/main.css" />

  </head>

  <body>

    <div class="navbar">

      <div class="container">

        <a class="logo" href="#">Remember<span>That</span></a>

        <img

          id="mobile-cta"

          class="mobile-menu"

          src="images/menu.svg"

          alt="mobilemenu"

        />

        <nav>

          <img

            id="mobile-exit"

            class="mobile-menu-exit"

            src="images/exit.svg"

            alt="Close Navigation"

          />

          <ul class="primary-nav">

            <li class="home"><a href="#">Home</a></li>

            <li><a href="#">Feature</a></li>

            <li><a href="#">pricing</a></li>

          </ul>

          <ul class="secondary-nav">

            <li><a href="#">Contacts</a></li>

            <li class="go-premium"><a href="#"> GoPremium</a></li>

          </ul>

        </nav>

      </div>

    </div>

    <section class="hero">

      <div class="container">

        <div class="left-col">

          <p class="subhead">IT'S NITTY &AMP; GRITTY</p>

          <h1>A Task App That Doesn't Stink</h1>

          <div class="hero-cta">

            <a href="#" class="primary-cta">Try for free</a>

            <a href="#" class="watch-video"

              ><img

                class="video-image"

                src="images/watch.svg"

                alt="watch-video"

              />watch a video

            </a>

          </div>

        </div>

        <div class="right-col">

          <img src="images/illustration.svg" alt="items" />

        </div>

      </div>

    </section>

    <section class="feature-section">

      <div class="container">

        <ul class="feature-list">

          <li>Unlimited task</li>

          <li>SMS Task Reminders</li>

          <li>Confetti explosions upon task completions</li>

          <li>Social Media Announcements</li>

          <li>Real time collaborations</li>

          <li>Other awesome features</li>

        </ul>

        <img src="images/holding-phone.jpg" alt="holding-phone " />

      </div>

    </section>

    <section class="testimonial">

      <div class="container">

        <ul>

          <li>

            <img src="images/person.jpg" alt="person" />

            <blockquote>

              "Lorem Ipsum is simply dummy text of the printing and typesetting

              industry. Lorem Ipsum has been the industry's standard dummy text

              ."

            </blockquote>

            <cite>- Jane doe </cite>

          </li>

          <li>

            <img src="images/person.jpg" alt="person" />

            <blockquote>

              "Lorem Ipsum is simply dummy text of the printing and typesetting

              industry. Lorem Ipsum has been the industry's standard dummy text

              ."

            </blockquote>

            <cite>- Jane doe </cite>

          </li>

          <li>

            <img src="images/person.jpg" alt="person" />

            <blockquote>

              "Lorem Ipsum is simply dummy text of the printing and typesetting

              industry. Lorem Ipsum has been the industry's standard dummy text

              ."

            </blockquote>

            <cite>- Jane doe </cite>

          </li>

        </ul>

      </div>

    </section>

    <section class="contact-section">

      <div class="conntainer">

        <div class="contact-left">

          <h2>contact</h2>

          <form action="">

            <label for="name"> Name </label>

            <input type="text" id="name" name="name" />

            <label for="message"> Message </label>

            <textarea

              name="message"

              id="message"

              cols="30"

              rows="10"

            ></textarea>

            <input

              type="submit"

              class="send-message-cta"

              value="send message"

            />

          </form>

        </div>

        <div class="contact-right">

          <iframe

            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d62103.57855058145!2d77.6339973713822!3d13.3829710914545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bb1e445ebfcea17%3A0x1639f72959196608!2sNandi%20Hills%2C%20Karnataka!5e0!3m2!1sen!2sin!4v1626952020874!5m2!1sen!2sin"

            width="600"

            height="450"

            style="border: 0"

            allowfullscreen=""

            loading="lazy"

          ></iframe>

        </div>

      </div>

    </section>

    <script>

      const mobileBtn = document.getElementById("mobile-cta");

      nav = document.querySelector("nav");

      mobileBtnExit = document.getElementById("mobile-exit");

      mobileBtn.addEventListener("click", () => {

        nav.classList.add("menu-btn");

      });

      mobileBtnExit.addEventListener("click", () => {

        nav.classList.remove("menu-btn");

      });

    </script>

  </body>

</html>

*-----------------------------------------------------------------------------------------------------------------------

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root {

  --primary-color: #007af3;

}

body {

  background: #f2f2f2;

  margin: 0;

  font-family: "Poppins";

}

.navbar {

  background: white;

  padding: 1em;

  .logo {

    text-decoration: none;

    font-weight: bold;

    color: black;

    font-size: 1.2em;

    span {

      color: var(--primary-color);

    }

  }

  nav {

    display: none;

  }

  .container {

    display: flex;

    place-content: space-between;

  }

  .mobile-menu {

    cursor: pointer;

  }

}

a {

  color: #444444;

}

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}

section {

  padding: 5em 2em;

}

.hero {

  text-align: center;

}

.left-col {

  .subhead {

    text-transform: uppercase;

    font-weight: bold;

    color: gray;

    letter-spacing: 0.3em;

  }

  h1 {

    font-size: 2.5em;

    line-height: 1.3em;

    margin-top: 0.2em;

  }

  .primary-cta {

    background: var(--primary-color);

    color: white;

    text-decoration: none;

    padding: 0.6em 1.3em;

    font-size: 1.4em;

    border-radius: 5em;

    font-weight: bold;

    display: inline-block;

  }

  .watch-video-cta {

    display: block;

    margin-top: 1em;

    img {

      margin-right: 0.5em;

    }

  }

}

.hero-img {

  width: 70%;

  margin-top: 3em;

}

section.features-section {

  background: #20272e;

  color: white;

}

ul.features-list {

  margin: 0;

  padding-left: 0.1em;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));

  li {

    font-size: 1.1em;

    margin-bottom: 1em;

    margin-left: 2em;

    position: relative;

    &:before {

      content: "";

      left: -2em;

      position: absolute;

      width: 20px;

      height: 20px;

      background-image: url("https://assets.codepen.io/2621168/bullet.svg");

      background-size: contain;

      margin-right: 0.5em;

    }

  }

}

.features-section img {

  display: none;

}

.testimonials-section {

  background: var(--primary-color);

  color: white;

  li {

    background: #006bd6;

    text-align: center;

    padding: 2em 1em;

    width: 80%;

    margin: 0 auto 5em auto;

    border-radius: 1em;

    img {

      width: 5em;

      height: 5em;

      border: 5px solid #006bd6;

      border-radius: 50%;

      margin-top: -4.5em;

    }

  }

}

h2 {

  font-size: 2em;

}

label {

  display: block;

  font-size: 1.2em;

  margin-bottom: 0.5em;

}

input,

textarea {

  width: 100%;

  padding: 0.8em;

  margin-bottom: 1em;

  border-radius: 0.3em;

  border: 1px solid gray;

  box-sizing: border-box;

}

input[type="submit"] {

  background-color: var(--primary-color);

  color: white;

  font-weight: bold;

  font-size: 1.3em;

  border: none;

  margin-bottom: 5em;

  border-radius: 5em;

  display: inline-block;

  padding: 0.8em 2em;

  width: unset;

  cursor: pointer;

}

iframe {

  width: 100%;

  height: 300px;

}

nav.menu-btn {

  display: block;

}

nav {

  position: fixed;

  z-index: 999;

  width: 66%;

  right: 0;

  top: 0;

  background: #20272e;

  height: 100vh;

  padding: 1em;

  ul.primary-nav {

    margin-top: 5em;

  }

  li {

    a {

      color: white;

      text-decoration: none;

      display: block;

      padding: 0.5em;

      font-size: 1.3em;

      text-align: right;

      &:hover {

        font-weight: bold;

      }

    }

  }

}

.mobile-menu-exit {

  float: right;

  margin: 0.5em;

  cursor: pointer;

}

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

  .mobile-menu,

  .mobile-menu-exit {

    display: none;

  }

  .navbar .container {

    display: grid;

    grid-template-columns: 180px auto;

    justify-content: unset;

  }

  .navbar nav {

    display: flex;

    justify-content: space-between;

    background: none;

    position: unset;

    height: auto;

    width: 100%;

    padding: 0;

    ul {

      display: flex;

    }

    a {

      color: black;

      font-size: 1em;

      padding: 0.1em 1em;

    }

    ul.primary-nav {

      margin: 0;

    }

    li.current a {

      font-weight: bold;

    }

    li.go-premium-cta a {

      color: var(--primary-color);

      border: 3px solid var(--primary-color);

      font-weight: bold;

      border-radius: 5em;

      margin-top: -0.2em;

      &:hover {

        background: var(--primary-color);

        color: white;

      }

    }

  }

}

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

  .container {

    width: 1080px;

    margin: 0 auto;

  }

  section {

    padding: 10em 4em;

  }

  .hero .container {

    display: flex;

    justify-content: space-between;

    text-align: left;

    .left-col {

      margin: 3em 3em 0 5em;

      h1 {

        font-size: 3em;

        width: 90%;

      }

    }

  }

  .hero-img {

    width: 30%;

    margin-right: 8em;

  }

  .hero-cta {

    display: flex;

  }

  .primary-cta {

    margin-right: 1em;

  }

  ul.features-list {

    display: block;

    margin-left: 5em;

    li {

      font-size: 1.4em;

      &:before {

        width: 30px;

        height: 30px;

      }

    }

  }

  .features-section {

    position: relative;

  }

  .features-section img {

    display: block;

    position: absolute;

    right: 0;

    width: 350px;

    bottom: -2em;

  }

  .testimonials-section ul {

    display: flex;

    li {

      margin: 0 1em;

    }

  }

  .contact-section {

    position: relative;

    .container {

      display: flex;

    }

  }

  .contact-right {

    position: absolute;

    right: 0;

    top: 0;

    width: 45%;

    height: 100%;

    iframe {

      height: 100%;

    }

  }

}

@media only screen and (max-width: 1450px) {

  .features-section {

    &:before {

      content: "";

      position: absolute;

      width: 10%;

      height: 20em;

      background: var(--primary-color);

      left: 0;

      top: -4em;

    }

    &:after {

      content: "";

      position: absolute;

      width: 200px;

      height: 20em;

      background: url("https://assets.codepen.io/2621168/dots.svg") no-repeat;

      left: 4.5em;

      top: 2em;

    }

  }

}

Hello there.

Do you have a question?

If so, please edit your post to include it.

Learning to describe problems is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.