What is a Media Query?
Media queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
In this article, we are going to build a simple 3 column grid page and make it responsive with a media query.
Step 1: create a file called index.html anywhere on your machine. Copy the HTML skeleton code below and paste inside the index.html file
<!DOCTYPE html>
<html>
<head>
<title>Media Query</title>
<link rel="stylesheet" type="text/css" href="css/media_query.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>At this point, it will show nothing on the page, let's begin by adding some content into it.
Let's create our divs for the 3 column grid. see below->
<!DOCTYPE html>
<html>
<head>
<title>Media Query</title>
<link rel="stylesheet" type="text/css" href="css/media_query.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="maindiv">
<h1 style="text-align: center;">CSS Media Query Example</h1>
<div class="div1 diveclass">
<div class="divcontain">
<h1>First Responsive Grid</h1>
<img src="images/1.jpg">
<p>absolute CSS widths for page elements, will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.
</p>
</div>
</div>
<div class="spacediv diveclass"></div>
<div class="div2 diveclass">
<div class="divcontain">
<h1>Second Responsive Grid</h1>
<img src="images/1.jpg">
<p>absolute CSS widths for page elements, will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.
</p>
</div>
</div>
<div class="spacediv diveclass"></div>
<div class="div3 diveclass">
<div class="divcontain">
<h1>Third Responsive Grid</h1>
<img src="images/1.jpg">
<p>absolute CSS widths for page elements, will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.
</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</body>
</html>we are pretty much done with HTML, let's move on to CSS.
Create a CSS file called styles.css and link it to the HTML page like so
<link rel="stylesheet" type="text/css" href="css/styles.css" />If your CSS file is in the same directory as HTML then, this is how you will link it.
<link rel="stylesheet" type="text/css" href="styles.css" />Paste the code below into your CSS file and refresh your page.
body{
margin:0;
padding: 0;
}
.maindiv {
width: 100%;
}
.div1 {
width: 32%;
background-color: #f2f2f2;
}
.div2 {
width: 32%;
background-color: #f2f2f2;
}
.div3 {
width: 32%;
background-color: #f2f2f2;
}
.divcontain {
padding: 10px;
}
img {
width: 100%;
}
.diveclass {
float: left;
border-radius: 10px;
}
.spacediv {
width: 2%;
height: 20px;
}
.clearfix {
clear: both;
}
You must have started seeing good results but at this stage, the page isn't responsive yet. Let's dive into making the page responsive.
Add the below blog of code to your CSS file to make it responsive.
/* Media queries*/
@media only screen and (max-width: 790px){
.div1 {
width: 49%;
}
.div2 {
width: 49%;
}
.div3 {
width: 100%;
}
}
@media only screen and (max-width: 600px) {
.div1 {
width: 100%;
}
.div2 {
width: 100%;
}
.div3 {
width: 100%;
}
}I think we are done. You should now be able to see the Desktop, tablet and mobile view of the page.
You can download our example source code Download Source code
0 comments