Search code examples
csstwitter-bootstrapmedia-queries

Apply style, only if both classes are in use (media queries / bootstrap)

Even if my browser is resized to use the sm style, this text-align applies to it - despite telling it to apply on md-3, not sm

In other words, I want to be able to apply a style only if media queries interprets my device as an sm screen. The style I have below, applies to all sizes - even md. How do I fix it?

My CSS:

div.col-md-3.subnav{
    text-align: center;
}

And the HTML:

<div class="col-xs-12 col-sm-6 col-md-3 subnav">Pricing</div>
Solution

  • It's applied because there is class subnav on the div which defines text-align: center irrespective of current dimension.

    You need to add media query rule for your specific alignment:

    @media (min-width: 768px) {
    .subnav {
        text-align: center;
    }
}