CSS媒體查詢無法在HubSpot網站上工作

Question

我試圖爲使用HubSpot CRM構建的網站編寫媒體查詢，並且我的查詢沒有做任何事情。我已在我腦海中的<meta name="viewport" content="width=device-width" />和下面的CSS：

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

這是應該改變的導航鏈接的字體大小，使他們不突破到一個新行 - http://www.steelbridgeins.com/

請幫忙！ -_-

Answer 1

您可以刪除設備屬性的all，因爲它是默認設置，我認爲您的意思是使用max-width，而不是如果您試圖將目標設置爲低於1045px的所有屏幕寬度。

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

Answer 2

我相信這個問題是由於媒體查詢的嵌套而發生的。目前，style.min.css，您使用的是：

@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; 
     } 
    } 
} 

如果你移動你想要的其他媒體查詢外的媒體查詢，如下圖所示，這應該解決您的問題。

@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; 
    } 
}