Запросы CSS Media, не работающие на сайте 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; 
    } 
}