How can I make my container look nice on phone screens and not come out bad on desktop screens?



So I’m a newbie when it comes to bootstrap. I came across the web and found out that I can make my containers look the same on all screens by using this code?

@media (min-width: 1200px) {
        .container-small {
    width: 700px;
.container-large {
    width: 1500px;

Can someone please explain this more to me and tell me how it works.


@media (min-width: 1200px) {

This tell to the PC, when the screen width is equal or less than 1200px the boxes you edited before in CSS are going to have a different behavior.

I mean if I have a div which width is 500px and, of course, in a cellphone doesn´t look good, you while using this metod of @media can change the size and behavior of your div and the elements that contains, without affect your original size in the desktop.

In this video is explained very well. I hope it can helped you!

Answered By – Juan Bassi

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More