I'm using BS3 and would like to align a div to the center when the resolution is greater than 1200px and the right is between 992 and 1199px. In the code I use the class center-block, how do I include this class only for @media min-width: 1200px?
@media (min-width: 1200px) {
}
@media (min-width: 992px) and (max-width: 1199px) { .alignment { float: right } }
You could use a CSS preprocessor, such as LESS, to include the class in your media query, such as in this example , but may be exaggerated 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 contents of the original BS3 class into your @media.
It probably makes up for you to manually customize on your own% _with% 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 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 @media is working before you even do the layout.