Question 250158 in Html Question posted in
Some basic documentation can be found here.

Html – Doesn't apply media for ".nav__btn" class

please explain this problem; I wanna ".nav__btn" class display’s be none where min-width: 768px; but it doesn’t work

——————–Media Code————————

@media (min-width: 768px) {
    .nav__btn {
        display: none;
    }
}

————————-Styles Code———————–

.nav__btn {
    width: 5.5rem;
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 2.2rem;
    cursor: pointer;
}

I wanna ".nav__btn" class display’s be none

Tags:

2

Answers


  1. 0

    Place the script just before the closing tag to ensure that the JavaScript code is executed.

    This way, it will listen for window resize events and adjust the ".nav__btn" element’s display property accordingly.

      <script>
            window.addEventListener('resize', function() {
                var navBtn = document.querySelector('.nav__btn');
                if (window.innerWidth >= 768) {
                    navBtn.style.display = 'none';
                } else {
                    navBtn.style.display = 'flex'; // Or whichever default display value you want
                }
            });
        </script>
    Login or Signup to reply.
  2. 0

    When rulesets have equal specificity, the later rule “wins” in the cascade.

    The rule in the media query sets it to display: none when the width is over 768 px, then the rule after it sets it to display: flex unconditionally.

    Change the order of your rulesets.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search