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

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.

Solution

@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.

https://www.youtube.com/watch?v=6Yh8y0pVfQc&ab_channel=Flux

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