Simple Responsive CSS trick

Responsive web is here to stay. Some websites are very hard to read when presented at full scale on a tiny screen. I found it cumbersome to rewrite all my CSS styles inside a @media tag to make it responsive at different screen size. However, lately I have been using a few lines of codes that make my page look good no matter where it is displayed.

The three amigos

• width
• max-width
• min-width

Those are the three properties that I use to make an element display correctly no matter what the screen size is. Example:

.main-content {
    width:100%;
    max-width:960px;
    min-width:320px;
}

What this is going to do is display the main-content at 960px if you have a large screen. If a user is on a 480px screen it will adjust automatically. And it limits the minimum size to 320px.

One thing I like to add is the box-sizing property to make sure I can add some padding to my content. This way the text will not be hugging the the border of the screen. So the overall code is this:

.main-content {
    width:100%;
    max-width:960px;
    min-width:320px;
    border-sizing: border-box;
    padding: 6px 12px;
}

This does not replace the @media tag entirely but it helps you make part of your layout responsive without having to write screen specific code.

Enjoy!

---