Skip to content

Responsive Basics

Responsive Design Basics

Responsive design is an approach to make your page to work on all screen resolutions.

Getting Started

In order to setup our page to work responsively, we need to add this inside our <head> element:

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">

W3C Article

Read this W3C article about responsive design. It will let you know all the basics of responsive design. Then read rest of this page as we will now fix responsivity of our floated articles.

Media Queries

Media queries are the most important CSS definitions for creating pages that work responsively. You use them like this:

CSS
/* For screens smaller than 800px */
@media screen and (max-width: 800px) {
  YOUR_SELECTORS {
    YOUR_DECLRATIONS
  }
}

/* For screens higher than 800px */
@media screen and (min-width: 800px) {
  YOUR_SELECTORS {
    YOUR_DECLRATIONS
  }
}

Fixing our Articles with Media Queries

Currently when we scale our browser window to smaller size, our articles squeeze next to each other and they become very hard to read. In order to fix this, we can determine the width where our articles become too squeezed together to read and we can change their width to 100% so that they will start from new line on too small resolutions:

CSS
@media screen and (max-width: 800px) {
  .articles-container article {
    width: 100%;
  }
}