CSS-Medienabfragen funktionieren nicht auf der HubSpot-Site

Question

Ich versuche Medienabfragen für eine Website zu schreiben, die mit HubSpot CRM erstellt wurde, und meine Abfragen machen nichts. Ich habe die <meta name="viewport" content="width=device-width" /> in meinem Kopf und die folgende CSS hinzugefügt:

@media all and (min-width: 1045px) { 
    .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a { 
    font-size: 0.9em; 
    } 
} 

das soll die Schriftgröße der Navigations-Links ändern, so dass sie in eine neue Zeile nicht brechen - http://www.steelbridgeins.com/

bitte hilfe! -

Answer 1

Sie können all für das Geräteattribut entfernen, da es die Standardeinstellung ist, und ich denke, Sie verwenden max-width stattdessen, wenn Sie versuchen, alle Bildschirmbreiten unter 1045px zu targeten.

@media (max-width: 1045px) { 
    .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a { 
    font-size: 0.9em; 
    } 
} 

Answer 2

Ich glaube, dieses Problem tritt aufgrund der Verschachtelung von Medienabfragen auf. Derzeit in style.min.css, verwenden Sie:

@media (min-width: 481px) and (max-width: 767px) { 
    /* some stylings */ 
    @media (max-width: 1045px) { 
     .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a { 
      font-size: 0.9em; 
     } 
    } 
} 

Wenn Sie die Medienabfrage bewegen Sie sich außerhalb der anderen Medien Abfrage wünschen, wie unten gezeigt, das Ihr Problem beheben sollte.

@media (min-width: 481px) and (max-width: 767px) { 
    /* some stylings */ 
} 

@media (max-width: 1045px) { 
    .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a { 
     font-size: 0.9em; 
    } 
}