Responsive Website Design Using Media Queries

Introduction

Media query has a media type and at least one expression that limits the style sheets' scope by using media features for individual screen sizes, such as width, height, and color. This is the feature of CSS 3. Let’s understand the basics of media queries.

Syntax

Media query in the link element.

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Media query in Stylesheet.

.facet_sidebar {
    /* Styles */
}

This is a simple syntax. Now let’s do some practice by this we can get some knowledge.

If we have a simple page like the following.

The output for this will be the following.

When we will resize the screen, there will be no responsiveness, it will look like the following.

So we will get a scroll in X-Direction. A responsive design never has a scroll in X. It always shows a full documents on X-axis in the first screen. So we need to have a responsive design which can have responsiveness in all devices and screens. Let's do something for the screen size of 500 px.

Let’s edit the CSS.

The output for this window below 500px screen will be like the following.

This output has no scroll. Still, this output is not attractive, let’s do some more changes and make it fully visible text and image a bit different manner.

So the output for these screens will be the following.

For full screenshot.

For less than 500px.

And for less than 350px.

Summary

In a similar way, we can add media queries for all the screens. And can represent the same website in a different way with the same code only changing the media query. So this is the power of Media Query. We will make some more attractive websites in the next articles. Stay tuned and keep coding!