I did some searching on S/O on how to define a minimum width for a responsive layout in Bootstrap3, but found conflicting answers due to "media queries."
What I want to achieve is my layout being responsive only down to a certain point. When my layout reaches, say 800px width, I want it to stop being responsive. Any suggestions on how to do this properly? Thank you!
Update: in order to achieve this, what parameters should be modified at http://getbootstrap.com/customize/ ?
Go to http://getbootstrap.com/customize/
scroll to --> Media queries breakpoints
Define the breakpoints at which your layout will change, adapting to different screen sizes.
Now scroll to --> Container sizes
Define the maximum width of .container for different screen sizes.
I'm thinking when you say 'responsive down to 800px' you're saying you want to have a fluid grid down to 800px, then have the layout be a fixed width of 800px.
It's not the easiest of tasks, but generally speaking my suggestion to achieve this would be to override the base bootstrap css (or LESS) using a media query that targets browser widths of 800px or smaller. Something like.
@media screen and (max-width:800px) {
.col-lg-3 {
width: 100px;
}
.col-lg-2 {
width: 80px;
}
}
What's inside the media query's curly braces above is just an example, but you'd want to target the classes you are using to build your layout. Usually they start with .col-. There is a S/O thread that provides more detail here: How to remove responsive features in Twitter Bootstrap 3?
