Search code examples
twitter-bootstrapmedia-queriesresponse

How do I get media queries to work in bootstrap?

I am trying to use media queries to change the font size in a certain div using the Bootstrap framework, but can't get it to change the font size.

here is the link:

http://www.jhurleydesign.com/bbw/

and here is the code:

@media (min-width: @screen-sm-min)  { 
    .logodiv h1 {
        font-size:36px; 
        line-height: 36px;
    } 
}

The wording I want to change the size of is the main heading "BLOOD BIKES WALES" in the red font at the top.

any help gratefully received

Thank You

Solution

  • Your code includes a variable, which the browser doesn't know what to do with. You'll need to either use straight CSS:

    @media (min-width: 768px)  { 
    .logodiv h1 {
        font-size:36px; 
        line-height: 36px;
    } 
}

    Or compile your LESS code into proper CSS.

    http://getbootstrap.com/customize/#less

    http://lesscss.org/

    http://lesscss.org/#-variables