Media Queries funktionieren nicht für kleinere Formate

Question

Die Elemente auf der Seite reagieren nur auf die Medienabfragen mit 1650px Bildschirmgröße und höher. Daher kann ich keine Artikel für mobile Geräte erstellen. Auf dem Desktop ist alles gut, aber Tablet- und Handy-Bildschirme reagieren nicht. Den Code unten veröffentlichen. Gibt es irgendwo einen Fehler? Hier sind meine Medien-Anfragen:

@media only screen and (max-width: 380px) { 
    footer { 
     margin-top: 50px; 
    } 
    .header-image { 
     height: 50px; 
    } 
    #social-icons { 
     display: flex; 
    } 
} 
@media only screen and (max-width: 480px) { 
    .header-image { 
     height: 100px; 
    } 
    #social-icons { 
     display: flex; 
    } 
    .custom-logo { 
     margin-top: 50px; 
    } 
} 
@media only screen and (max-width: 600px) { 
    footer { 
     margin-bottom: 50px; 
     text-align: center; 
     margin: 0 auto; 
    } 
    #social-icons { 
     display: flex; 
    } 
    .textwidget { 
     display: flex; 
     text-align: center; 
    } 
    .widget_text { 
     margin-right: 60px; 
    } 
    .custom-logo { 
     margin: 30px; 
    } 
} 
@media only screen and (max-width: 768px) { 
    .header-image { 
     height: 100px; 
    } 
    .menu-toggle { 
     display: none; 
    } 
    .custom-logo { 
     width: 50%; 
     margin-top: -20px; 
    } 
} 
@media only screen and (max-width: 900px) { 
    .main-navigation ul li a { 
     font-size: 16px; 
     display: none; 
    } 
    .custom-logo { 
     width: 70%; 
     position: relative; 
    } 
} 
@media only screen and (max-width: 1100px) { 
    .main-navigation ul { 
     margin-top: -35px; 
    } 
    .custom-logo { 
     width: 50%; 
     margin-top: -20px; 
     position: relative; 
    } 
} 
@media only screen and (max-width: 1250px) { 
    .custom-logo { 
     margin-left: 30px; 
    } 
} 
@media only screen and (max-width: 1400px) { 
    .custom-logo { 
     margin-top: 50px; 
     width: 50%; 
    } 
} 
@media only screen and (max-width: 1500px) { 
    .custom-logo { 
     margin-left: 100px; 
    } 
} 
@media only screen and (max-width: 1650px) { 
    .custom-logo { 
     margin: 0px; 
    } 
} 
@media only screen and (max-width: 1850px) { 
    .custom-logo { 
     width: 25%; 
    } 
} 

Answer 1

Bei der Verwendung von nicht-mobilen ersten Ansatz (max-width) benötigen Sie die Abfragen in der Reihenfolge von der höchsten bis zur niedrigsten setzen (weil CSS Cascading, so dass die letzte Regel außer Kraft setzen die der erste), aber du hast es rückwärts.