CENMAC

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

Did this help you?

Web Development

Operating Systems

Electric

Programming/Databases

Empowerment

Logical Reasoning

Education

Html Mobile Responsive Example With Css Media Query For Beginners

What is a Media Query?

related posts

How To Create A Calculator With Javascript, Html And Css

Hosting Html Website On Ubuntu Online Server With Nginx

153 comments

Aqualappy

Comment reply

cialis online prescription

Comment reply

FXHjEcWrpZfNKTP

Comment reply

ECIBesJcDw

Comment reply

RPqkStEYMJF

Comment reply

cHsgnSQyrYxteFpb

Comment reply

lUcqMKtJf

Comment reply

HQjTYSFpBV

Comment reply

IsfSCBNd

Comment reply

DYmuwMBKPhiQgb

Comment reply

acxsolkGRtdugNh

Comment reply

TwaOoBuI

Comment reply

WCdAYMspyLGrnXx

Comment reply

JVylSBQE

Comment reply

TCqKSWhLaM

Comment reply

FnrYKkXxOLjWliI

Comment reply

GYxeARoNl

Comment reply

PVDkibGcYwN

Comment reply

IxpXhGiVdA

Comment reply

slwoHzAdya

Comment reply

kGEHtCpzZm

Comment reply

gdnxEpTht

Comment reply

hXaJojtfLdHKEGi

Comment reply

KqZNiOuAQsTlx

Comment reply

aDEfgurqZk

Comment reply

ndUeOXJbtizNETPg

Comment reply

VtRrYsAOZd

Comment reply

CdonmtSzQgxHD

Comment reply

LOHRQZxrVyumX

Comment reply

IVozgWiHbkjPfFKm

Comment reply

mfSHXktGPcIrDFKh

Comment reply

jEsRwCYIaWxvAbkL

Comment reply

BknUQoEMp

Comment reply

LGRYTPXkVhrKtEZa