Blog » HTML-CSS » how to create html css responsive web pages

how to create html css responsive web pages

This tutorial will show you how to create html css responsive web pages.responsive web design is automatically web pages resize,hide,width,large, websites make better look.and all web pages are very easy to control.(tablet,dextop,mobile phones) such as.Web pages should not leave out information to fit smaller devices, When we making responsive web pages, you have to add <meta> tag element all of your web pages.

Completed source code


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>responsive web layout</title>
<style>
*{
box-sizing: border-box;
}
body{
background-color:#f5f5f5;
}
.header{
top: 0;
left: 0;
width: 100%;
padding:15px;
background:#CCC;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
border-top: 2px solid gray;
border-bottom: 1px solid #069;
position: fixed;
}
.left {
width: 65%;
height:520px;
background-color: #fff;
float:left;
margin-top:80px;
padding:10px;
border-radius:4px;
border:solid #eee 1px;
}
.right {
width: 30%;
background-color:#fff;
float:right;
height:auto;
margin-top:80px;
padding:10px;
border-radius:4px;
border:solid #eee 1px;
height:520px;
}
@media only screen and (max-width: 768px) {
.container {
flex-direction: column-reverse;
margin-bottom:80px;
}
.left, .right {
width: 100%;
padding:10px;
margin-top:10px;
margin-bottom:10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="left">left-side</div>
<div class="right">Right-side</div>
</div>
</body>
</html>
ARTICLE POSTED BY : Admin

Hi, I'am k.g uththara. I'm a professional web developer. I write blog posts in my free time. if you want to contact me, send a message on contact page, thanks.