css – Fluid/responsive layout at least 940px and maximum 1170px with bootstrap

Question:

I'm a beginner with Bootstrap and responsive layouts and I encountered a small hurdle in developing a responsive layout using Bootstrap. In the layout of the site, the content was created to be displayed with a maximum of 1170px and a minimum of 940px in width, and in that range, it must be fluid. In Bootstrap the grid adapts from 724px and 1170px depending on the viewport , and this is where I don't understand. Is it possible to determine with the viewport that the layout will only be responsive between 940 and 1170 pixels, with less than 940px it behaves as unresponsive and at greater than 1170 it centers the content?

My structure looks like this:

...
<meta name="viewport" content="initial-scale=1.0">
<link type="text/css" href="css/bootstrap.min.css" media="screen">
<link type="text/css" href="css/bootstrap-responsive.min.css">
...

No styles.css:

/* Desktop maiores */
@media (min-width: 1171px) {
    .container-fluid {
        max-width: 1170px;
        margin: 0 auto;
    }
}

Is the problem in the viewport ? And how would it be correct?

Answer:

You can determine, as in if, else if the behavior for each screen size, such as up to x pixel, between x and y and greater than y, like this:

@media screen and (min-width: 1171px) {
      //vai o código
}

@media screen and (min-device-width: 940px) and (max-device-width: 1170px) { 
    //vai o codigo
}

@media only screen and (max-device-width: 939px) {
    //vai o codigo
}
Scroll to Top