Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Migle Varnagire
Migle Varnagire
7,739 Points

Min-width with Bootstrap

Hi,

I want to limit the size of the window to 468px, so it doesn't get any smaller. My media quaries based on bootstrap mobile first (min-width (x))

I'm working with bootstrap and my css for body is:

body { width: 100%; height: 100%; }

If I do below, then bootstrap's responsive design isn't working anymore

body { min-width: 468px; height: 100%; }

How can I solve this?

Thanks

3 Answers

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

When you say limit the size of the window means limiting the size of the objects? Or you want to prevent user from making the window smaller than 468px?

If you want the elements to be at least 468px wide you should apply this to a main element, lets say a wrapper div.

@media only screen and (max-width : 480px) {
     #wrapper {margin:0 auto; width:100%; min-width:468px;
        height:auto;}

} this should position all the elements inside the wrapper div at the center of the window use window resizer chrome addon to check this out

Migle Varnagire
Migle Varnagire
7,739 Points
Migle Varnagire
Migle Varnagire
7,739 Points

Hi Felix,

Thanks for your quick reply!

I want to prevent the user from making the window smaller than 468px. I tried your code, but it just disabled bootstrap responsiveness for devices smaller than 468px.

Is there something else I could try to prevent user from making the window smaller? Perhaps limit body size somehow?

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

I hope I'm not wrong but you cant stop users from scaling their window... But why would you try that? Bootstrap is mobile first so you really just need to add

@media (max-width: 480px) {...}

to what queries you already have And inside you can apply any size you want for the main div / grid you are using.

Check this question: http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries Also: http://www.responsinator.com/ to check how it looks on mobile devices.

If you are still stuck please send me a html + css file for your project and I'll gladly try to fix that. felix.yakubov91@gmail.com