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