0

I'm attempting to write media queries for a site built using HubSpot CRM and my queries are not doing anything. I've added the <meta name="viewport" content="width=device-width" /> in my head and the following css:

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

this is supposed to change the font-size of the navigation links so they don't break to a new line - http://www.steelbridgeins.com/

please help! -_-

Christina Gooyers
  • 13
  • 2

2 Answers2

0

You can remove all for the device attribute as it is the default and I think you mean to use max-width instead if you are trying to target all screen-widths below 1045px.

@media (max-width: 1045px) {
   .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
     font-size: 0.9em;
   }  
}
Ryan Dantzler
  • 1,124
  • 1
  • 8
  • 18
0

I believe this problem is occurring due to the nesting of media queries. Currently, in style.min.css, you are using:

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

If you move the media query you desire outside of the other media query, as shown below, this should resolve your issue.

@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;
   }
}
smrubin
  • 551
  • 6
  • 13