Fluid / responsive layout at least 940px and at most 1170px with bootstrap

Question

Fluid / responsive layout at least 940px and at most 1170px with bootstrap

Navigation

#1 by (1 votes)

3

I am a beginner with Bootstrap and responsive layouts and have encountered a small obstacle in developing a responsive layout using Bootstrap. In the site layout, content was created to be displayed with at most 1170px and at least 940px in width, and should be fluid in that range. In Bootstrap the grid adapts to 724px and 1170px depending on viewport , and that's where I do not understand. Is it possible to determine with viewport that the layout will only be responsive between 940 and 1170 pixels, and in less than 940px it behaves as unresponsive and in more than 1170 it centralize the content? >

My structure looks like this:

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

No styles.css:

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

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

css twitter-bootstrap

asked by anonymous 23.05.2015 / 06:21

1 answer

How to select a value from an option by AngularJS How do I display a confirmation message when I click the delete option in the grid?

score 1 · Answer 1

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
}