Responsive Design using @media in your CSS

It’s a ‘feature’

Today, I’d like to talk about building responsive web design.

Now, it can be fine just making your website ‘static’ or ‘fixed’, but this can end up making your website look strangely in different viewports, or window sizes.

To rectify this situation, let’s take a look at a standard CSS definition:

.my-header {
     width: 500px;
}

Here, you can see a standard CSS definition for a class named ‘my-header’.

There’s absolutely nothing wrong with sizing your particular <div> or <h1> this way. However, what if we wanted this to ‘snap’ to a different size once we know someone’s viewing our website through a smaller screen?

.my-header {
     width: 500px;
     @media (max-width: 800px){
          width: 200px;
     }
}

Now, whenever the web browser that someone’s using has a width of 800px or less, our specific .my-header will automatically resize to be 200px.

I hope you find this tip useful, and have a wonderful day.