0

I need to do a 'display: none' in a media query but for some unknown reason it is not working. I tried all the ways, with min-width, with max-width, adding a to it but it still doesn't work. Can somebody help me? Thanks

HTML

<div class="navbar">
    <h2>THE BARBER AK-47</h2>
    <nav class="flexContainer container">
        <ul class="menu">
            <div class="logoAndMenuContainer"><img src="../images/kisspng-the-barber-shop-shaving-logo-barbershop-5adbe80e82a4b8.5084346115243612305351.png" alt="" class="logo">
                <div class="liContainer">
                    <li><a href=""> La barbería</a></li>
                    <li><a href="">Servicios</a></li>
                    <li><a href="">Trabajos</a></li>
                    <li><a href="">Equipo</a></li>
                    <li><a href="">Ubicación y horarios</a></li>
                    <li><a href="">Comentarios</a></li>
                    <li><a href="">Publicaciones</a></li>
                    <div class="closeMenu"><i class="fa fa-times"></i></div>
                    <span class="icons"><i class="fab fa-instagram"></i></span>
                    <span class="icons"><i class="fab fa-whatsapp"></i></span>
                </div>
            </div>
        </ul>
        <div class="visibleIcons">
            <span class="iconsOfVisibleIcons"><i class="fab fa-instagram"></i></span>
            <span class="iconsOfVisibleIcons"><i class="fab fa-whatsapp"></i></span>
        </div>

    </nav>
</div>

CSS

@media(min-width:800px) {
.navbar h2 {
    display: none;
}

}

.navbar h2 {
color: #BC9668;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
margin-top: 40px;
font-family: 'Newsreader', serif;
font-weight: 300;
letter-spacing: 5px;

}

Pictures

mobile desktop

Matias Orcajo
  • 1
  • Your code seems fine. Could you check your entire CSS files by yourself? It is possibly due to CSS Specificity. – Miu Mar 04 '21 at 01:53
  • 2
    If you wrote css in the same order as shown here, it seems to be because of the order. This is because css prioritizes the input below when applying the same style to the same element. In this case, it is because of the display of '.navbar h2'. You can either move the media query down or use '!important' to force it. – JS KIM Mar 04 '21 at 02:06
  • Does this answer your question? [Why are my CSS3 media queries not working on mobile devices?](https://stackoverflow.com/questions/7859336/why-are-my-css3-media-queries-not-working-on-mobile-devices) – disinfor Mar 04 '21 at 03:16

1 Answers1

0

Try this syntax instead...

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

.navbar h2 { display: none !important; }

}
SameUser
  • 1
  • 1