I'm doing an HTML site and I wanted to make the sidebar disappear when the screen-width is less or equal to 600px. It works on Firefox, but it doesn't in Chrome or Microsoft Edge and I don't understand why.

This is the code for the sidebar:

    <div >
        
        <ul>
            <li>
                <a href="https://www.facebook.com/"><img src="facebook.jpg" alt="icona facebook"></a>
            </li>
            
            <li>
                <a href="https://www.instagram.com/"><img src="instagram.png" alt="icona instagram"></a>
            </li>
            
            <li>
                <a href="https://www.twitter.com/"><img src="twitter.png" alt="icona twitter"></a>
            </li>
        </ul>

    </div>

And this is the CSS

/* SideBar */

.sidebar{
    
    background-color: black;
    backdrop-filter: blur(10px);
    position: fixed;
    z-index:0;
    margin-top:0;
    right:0;
    overflow-x: hidden;
    width: 100px;
    height: 100%;
    padding: 20px 0;


}


.sidebar a{

        padding: 6px 8px 6px 6px;
        display: block;
        

}

.sidebar  li{

    display: flex;
    flex-direction: column;
    width: 100%;

}

.sidebar img{
    
    width:50px;
    height:50px;
    padding:20px;


}
@media screen and (max-width: 600px) {
  .sidebar {
   
     display: none;
  }
}

Thank you for every advice!

CodePudding user response：

I suggest you to do this:

1. goto settings
2. search for cache
3. clear browsing data
4. check cached images and files (the past hour / day)
5. clear browsing data

Andd please go to your webpage, and press "Ctrl r"

Hope it was helpful. Thank you