How do I define using a class (center-block) in media-querie?

Question

I am using BS3 and would like to align a div to the center as the resolution is greater than 1200px and the right when between 992 and 1199px. In the code I use the class center-block, how to include this class only for @media min-width: 1200px?

@media (min-width: 1200px) {

}

@media (min-width: 992px) and (max-width: 1199px) { alignment {. float:right } }

Answer 1

You could use a CSS preprocessor, such as LESS, to include the class in your media query, such as in this example, but it can be exaggeration depending on the project.

One possibility to simplify is to use a class or id only, and update this class in each media, or simply copy the content of the original BS3 class to your @media.

Most likely it pays you to customize manually on your own @media only the parameters you need.

For example:

@media screen and ( min-width: 992px ) and ( max-width: 1199px ) {
    #meubloco { position:relative; width:800px; margin: 0 auto }
}

@media screen and ( min-width: 1200px ) {
    #meubloco { float:right }
}

If you want to test the @media before defining the classes, a very simple way is this:

#meubloco { width: 100%; height:20px; background-color: gray }
@media screen and ( min-width: 992px ) and ( max-width: 1199px ) {
    #meubloco { background-color: red }
}
@media screen and ( min-width: 1200px ) {
    #meubloco { background-color: green }
}

So you make sure of the @media be working even before making the layout.