Responsive Website Design Using Media Queries


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.

Media query in the link element.
  1. <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />    
Media query in Stylesheet.
  1. .facet_sidebar {     
  2.       Style     
  3.    }    
  4. }     
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,
simple page
The output for this will be the following,
output for this will be
When we will resize the screen, there will be no responsiveness, it will look like the following,
resize the screen
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.
full Visible Text
So the output for these screens will be the following,
For full screenshot,
For less than 500px,
And for less than 350px,


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!

Recommended Ebook

Printing in C# Made Easy

Download Now!
Similar Articles
Foreantech - A complete online solution company.