A single media query in Bootstrap 3 makes that the small size isn't affected by the custom css

Question

I'm trying to build a responsive website with Bootstrap 3. When I put the @media(min-width:768px) {..} to adjust a few things, the website from 0 to 767px (no media query specified for this), stops using the custom css.

I can't find the logic in this... Thanks

Here is the beginning of the custom css:

@media(min-width:768px) {
h1{font-size: 4.75em;}
h2{font-size: 3em;}
.navbar-fixed-top{
padding:25px 0;
}

body{
padding-top:40px;
font-family: 'Open Sans', sans-serif;
background-color:red;
}

When I resize the browser to a small size, the page doesn't use for example the body tag, but if I delete the @media all becomes normal

pankijs pankijs · Accepted Answer · 2014-09-19T08:49:36

you have invalid syntax.

@media (min-width:768px) {
    h1{font-size: 4.75em;}
    h2{font-size: 3em;}
    .navbar-fixed-top{
        padding:25px 0;
    }

    body{
        padding-top:40px;
        font-family: 'Open Sans', sans-serif;
        background-color:red;
    }
}

media selector has to be closed

A single media query in Bootstrap 3 makes that the small size isn't affected by the custom css

1 Answers