CSS not activated after reaching required screen width

Question

* {
  margin: 0px;
  padding: 0px;
}
.nav-bar {
  display: flex;
}

.nav-left {
  display: flex;
  width: 50%;
  background: linear-gradient(
    180deg,
    black,
    darkslategray,
    gray,
    darkslategray
  );
  justify-content: space-evenly;
  align-items: center;
}
#nav-left-links {
  display: flex;
}

#nav-left-links a {
  font-family: "Oswald", sans-serif;
  margin: 0px 10px;
}

#nav-left-links > li {
  list-style: none;
}

#nav-left-links > li > a {
  text-decoration: none;
  color: ivory;
  font-size: 1em;
}

.nav-right {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180deg,
    black,
    darkslategray,
    gray,
    darkslategray
  );
}

.dotaLogo {
  width: 90px;
  margin: 0px;
}

#socio-logo {
  padding: 0px 23px 0px;
  margin: 28px auto 0px;
}

ion-icon {
  width: 50px;
  height: 50px;
  color: ivory;
}

.rightNavImg {
  width: 360px;
  height: auto;
  margin: 10px 50px;
  display: block;
  border: 2px solid ivory;
}
@media screen and (min-width: 1024px) {
  .rightNavImg:hover {
    border: 2px solid gold;
  }
  ion-icon:hover {
    color: rgb(182, 29, 29);
  }
  .dotaLogo:hover {
    border: 8px solid gold;
  }
  .nav-right:hover {
    background: linear-gradient(
      180deg,
      black,
      rgb(17, 29, 29),
      rgb(40, 40, 40),
      rgb(17, 29, 29)
    );
  }
  .nav-left:hover {
    background: linear-gradient(
      180deg,
      black,
      rgb(17, 29, 29),
      rgb(40, 40, 40),
      rgb(17, 29, 29)
    );
  }
  #nav-left-links > li > a:hover {
    color: rgb(182, 29, 29);
    text-decoration: underline;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="error.css" rel="stylesheet" type="text/css" />
    <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>Document</title>
  </head>
  <body>
    <nav class="nav-bar">
      <div class="nav-left">
        <div id="nav-left-links">
          <li><a href="#ti-header">THE INTERNATIONALS</a></li>
          <li>
            <a href="https://www.dota2.com/home" target="_blank">ABOUT</a>
          </li>
          <li>
            <a
              href="https://www.dota2.com/esports/summermajor22/watch/0/0/series"
              target="_blank"
              >DOTA TEAMS</a
            >
          </li>
          <li><a href="https://hawk.live/" target="_blank">DOTA LIVE</a></li>
        </div>
        <div class="logo-div">
          <a href="https://www.dota2.com/home" target="_blank"
            ><img
              class="dotaLogo"
              src="https://i.pinimg.com/originals/8a/8b/50/8a8b50da2bc4afa933718061fe291520.jpg"
              alt="dota_logo"
              class="dotaLogo"
          /></a>
        </div>
      </div>
      <div class="nav-right">
        <a
          href="https://www.dota2.com/newsentry/3190249489765271734"
          target="_blank"
          ><img
            src="https://www.insidesport.in/wp-content/uploads/2021/07/Screenshot-2021-07-05-173505.jpg"
            alt="dota2Image"
            class="rightNavImg"
        /></a>
        <div id="socials">
          <a
            id="socio-logo"
            href="https://www.instagram.com/dota2/?hl=en"
            target="_blank"
            ><ion-icon name="logo-instagram"></ion-icon
          ></a>
          <a
            id="socio-logo"
            href="https://www.youtube.com/user/dota2"
            target="_blank"
            ><ion-icon name="logo-youtube"></ion-icon
          ></a>
          <a
            id="socio-logo"
            href="https://www.facebook.com/dota2/"
            target="_blank"
            ><ion-icon name="logo-facebook"></ion-icon
          ></a>
        </div>
      </div>
    </nav>
  </body>
</html>

I wanted the hover effect when the screen is atleast 1024px wide, so basically for the laptop sized screens and further. But the hover effect is not being activated even after 1024px. Instead it has become something like an onlick event. I am sorry if I used an irrevelent term, I am still a beginner. So the hover colors and effects are being applied after clicking a link but not while hovering. I have media queries for all the screens and the media query containing the hover effect is placed at last in all the media queries.

@media screen and (min-width: 1024px) {
  #tribute-link a:hover {
    color: black;
    text-decoration: underline;
  }
  .rightNavImg:hover {
    border: 2px solid gold;
  }
  ion-icon:hover {
    color: rgb(182, 29, 29);
  }
  .dotaLogo:hover {
    border: 8px solid gold;
  }
}

Please create a runnable snippet that shows the problem. We can't see whether the problem is caused by code or by perhaps your system cacheing the CSS on the evidence you have shown us. See https://stackoverflow.com/help/minimal-reproducible-example for help with doing this. — A Haworth, Sep 06 '22 at 05:55
you want your media query to work if the screen is less then 1024px? — UmairFarooq, Sep 06 '22 at 06:37
No, When the screen crosses 1024px the media query should take its effect then. — spacemarine-01, Sep 06 '22 at 06:41
Given everything works here, you need to provide a sample that doesn't, or no one can do much to help. — Asons, Oct 28 '22 at 13:26

score 0 · Answer 1 · answered Sep 06 '22 at 05:45

0

Please try:

Clearing cache Clearing web browser's history/cache Restarting web browser

And see if that works after that.

answered Sep 06 '22 at 05:45

Mark Anderson

1
3

I cleared my history, cache and restarted the browser but it didn't work. Thank you for reaching out though, much appreciated. – spacemarine-01 Sep 06 '22 at 06:20

Rizeen · Answer 2 · 2022-09-06T06:59:17.897

0

It is already working as expected.

I think you are experiencing something like an onclick event because you are either on a device smaller than 1024px or you are checking it using the "Toggle device toolbar" in the browser dev tools.. hover function doesn't show directly when using this

You can either use the minimize button at the top-right or refer this: See :hover state in Chrome Developer Tools

edited Sep 06 '22 at 06:59

answered Sep 06 '22 at 06:34

Rizeen

1,296
1
6
17

score 0 · Answer 3 · answered Sep 06 '22 at 06:44

0

For the links it looks like you are using a invalid selector. I can't see that any elements in the markup has the id of tribute-link. You could try this:

.nav-left-links a:hover {
    color: black;
    text-decoration: underline;
}

Instead of what you currently have here:

#tribute-link a:hover {
    color: black;
    text-decoration: underline;
}

answered Sep 06 '22 at 06:44

jjmss

91
1
6

Thank you sir, for pointing out my mistake, I have edited the snippet. The CSS "#tribute-link a" was not to be included. Your guidance has helped me take this confusion out. Much appreciated. – spacemarine-01 Sep 06 '22 at 06:58

CSS not activated after reaching required screen width

3 Answers3