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

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!


Comments

Let's hear your thoughts

For my eyes only

There are no comments added yet.