Responsive Web Template Using Media Queries Tutorial: In this post learn how to design responsive web template using media queries. Responsive website design tutorial using media queries. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.
Responsive Web Template Using Media Queries Tutorial
Responsive Website Template Tutorial Using Media Queries Tutorial and Reference.
Responsive Web Design Template Preview
Responsive Web Template Tutorial Using Media Queries Tutorial
Step 1: Creating a Basic html5 Document.
Example: Minimal Html5 Document
Step 2: Include meta viewport tag into html5 Document
<
!DOCTYPE
html
>
< html >
< head >
< meta charset=”UTF-8″ >
< title > WDR Responsive Web Template < /title >
< /head >
< body >
< /body >
< /html >
< html >
< head >
< meta charset=”UTF-8″ >
< title > WDR Responsive Web Template < /title >
< /head >
< body >
< /body >
< /html >
Example: Include meta viewport tag
<
meta name=”viewport” content=”width=device-width, initial-scale=1.0″/
>
Example: Include stylesheet.css, html5shiv.js and respond.js to the document
Step 4: Create Header part of WDR template.
<
!DOCTYPE
html
>
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1″ >
< title > WDR Responsive Web Template < /title >
< link href=”css/new-style.css” rel=”stylesheet” >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
< /body >
< /html >
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1″ >
< title > WDR Responsive Web Template < /title >
< link href=”css/new-style.css” rel=”stylesheet” >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
< /body >
< /html >
Example: Create Header part of WDR template
<
!DOCTYPE
html
>
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1″ >
< title > WDR Responsive Web Template < /title >
< link href=”css/new-style.css” rel=”stylesheet” >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
< /html >
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1″ >
< title > WDR Responsive Web Template < /title >
< link href=”css/new-style.css” rel=”stylesheet” >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
<header> <nav class="navbar" style="background:#444"> <div class="container"> <div class="navbar-logo"> <a class="navbar-brand" href="#">WDR Template</a> </div><!-- End .navbar-logo --> <div class="navigation"> <ul class="nav navbar-inverse navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog </a></li> </ul> </div><!-- End --> </div><!-- End .container --> </nav> </header><!-- End header-->< /body >
< /html >
Example: Create Content part of WDR template
Step 6: Create Footer part of WDR template.
<
!DOCTYPE
html
>
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1″ >
< title > WDR Responsive Web Template < /title >
< link href=”css/new-style.css” rel=”stylesheet” >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
< /html >
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1″ >
< title > WDR Responsive Web Template < /title >
< link href=”css/new-style.css” rel=”stylesheet” >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
<header>
<nav class="navbar" style="background:#444">
<div class="container">
<div class="navbar-logo">
<a class="navbar-brand" href="#">WDR Template</a>
</div><!-- End .navbar-logo -->
<div class="navigation">
<ul class="nav navbar-inverse navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog </a></li>
</ul>
</div><!-- End -->
</div><!-- End .container -->
</nav>
</header><!-- End header-->
<div class="container" style="margin-top:95px !important;">
<div class="row">
<div class="left-col">
<div class="blog-header well-formatting">
<h1 class="blog-title">WDR Template with Responsive Features.</h1>
<p class="lead blog-description">Some attractive description of your Blog Here.</p>
</div>
<div class="blog-post well-formatting">
<h2 class="blog-post-title">Sample blog post Heading</h2>
<p class="blog-post-meta">January 20, 2014 by <a href="#">Anil</a></p>
<p>Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text. </p>
<hr>
<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
<blockquote>
<p>Lorem ipsum dummy content of quote<strong> bold line of quote here</strong> Lorem ipsum dummy content of quote</p>
</blockquote>
<p>Blog post<em>content</em> here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text.</p>
<h2> Post Inner Heading in post</h2>
<p>Inner heading content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
<h3>Post sub-heading here</h3>
<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<pre><code>code block example here</code></pre>
<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
<h3>Again Sub-heading of post</h3>
<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
<ul>
<li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text content.</li>
<li>post content here which contain images, typography, <a href="#">quotes</a>, videos etc.</li>
<li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text etc.</li>
</ul>
<p>Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text.</p>
<ol>
<li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text, graphics etc.</li>
<li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text content here.</li>
<li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text here.</li>
</ol>
<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
</div><!-- End .blog-post-->
<div class="blog-post well-formatting">
<h2 class="blog-post-title">Another blog post Heading</h2>
<p class="blog-post-meta">January 22, 2014 by <a href="#">Anil</a></p>
<p>Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text. </p>
<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
<blockquote>
<p>Lorem ipsum dummy content of quote<strong> bold line of quote here</strong> Lorem ipsum dummy content of quote</p>
</blockquote>
<p>Blog post<em>content</em> here which contain images, typography, quotes, videos, text forms etc. or write here dummy text.</p>
<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
<h3>Again Sub-heading of post</h3>
<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
<ol>
<li>post content here which contain images, typography, <a href="#">quotes</a>, videos, dummy text.</li>
<li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text here.</li>
<li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text, forms here.</li>
</ol>
<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
</div><!-- End .blog-post-->
<ul class="pager pull-right">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div><!-- End .left-col -->
<div class="right-col blog-sidebar " id="sidebar">
<div class="sidebar-module">
<h4>About Us</h4>
<p>WDR Template is<em> Responsive</em> template of a wordpress blog. This can help for creating simple responsive blog.</p>
</div>
<div class="list-group" >
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Categories <span class="badge">8</span></h4>
</a>
<a href="#" class="list-group-item">Category 1</a>
<a href="#" class="list-group-item">Category 2</a>
<a href="#" class="list-group-item">Category 3</a>
<a href="#" class="list-group-item">Category 4</a>
<a href="#" class="list-group-item">Category 5</a>
<a href="#" class="list-group-item">Category 6</a>
<a href="#" class="list-group-item">Category 7</a>
<a href="#" class="list-group-item">Category 8</a>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ul class="list-group">
<li class="list-group-item"><a href="#">August 2014</a></li>
<li class="list-group-item"><a href="#">July 2014</a></li>
<li class="list-group-item"><a href="#">May 2014</a></li>
<li class="list-group-item"><a href="#">April 2014</a></li>
<li class="list-group-item"><a href="#">November 2013</a></li>
<li class="list-group-item"><a href="#">October 2013</a></li>
<li class="list-group-item"><a href="#">September 2013</a></li>
<li class="list-group-item"><a href="#">August 2013</a></li>
<li class="list-group-item"><a href="#">July 2013</a></li>
<li class="list-group-item"><a href="#">June 2013</a></li>
<li class="list-group-item"><a href="#">May 2013</a></li>
<li class="list-group-item"><a href="#">April 2013</a></li>
<li class="list-group-item"><a href="#">March 2013</a></li>
</ul>
</div>
<div class="sidebar-module">
<ul class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Recent Posts</h4>
</a>
<li class="list-group-item"><a href="#">Post 1</a></li>
<li class="list-group-item"><a href="#">Post 2</a></li>
<li class="list-group-item"><a href="#">Post 3</a></li>
</ul>
</div>
<div class="sidebar-module">
<ul class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Recent Comments</h4>
</a>
<li class="list-group-item"><a href="#">Comment 1</a></li>
<li class="list-group-item"><a href="#">Comment 2</a></li>
<li class="list-group-item"><a href="#">Comment 3</a></li>
</ul>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Facebook Plugin</h3>
</div>
<div class="panel-body">
Plugin part here
</div>
</div>
</div><!-- End .right-col-->
</div><!--.row-->
</div><!--.container-->
<hr>
<
/body
>< /html >
Example: Create Footer part of WDR template
Step 7: Css (style.css) part of WDR template.
<
!DOCTYPE
html
>
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1″ >
< title > WDR Responsive Web Template < /title >
< link href=”css/new-style.css” rel=”stylesheet” >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
< /html >
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1″ >
< title > WDR Responsive Web Template < /title >
< link href=”css/new-style.css” rel=”stylesheet” >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
<header> <nav class="navbar" style="background:#444"> <div class="container"> <div class="navbar-logo"> <a class="navbar-brand" href="#">WDR Template</a> </div><!-- End .navbar-logo --> <div class="navigation"> <ul class="nav navbar-inverse navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog </a></li> </ul> </div><!-- End --> </div><!-- End .container --> </nav> </header><!-- End header-->< /body >
<div class="container" style="margin-top:95px !important;"> <div class="row"> <div class="left-col"> <div class="blog-header well-formatting"> <h1 class="blog-title">WDR Template with Responsive Features.</h1> <p class="lead blog-description">Some attractive description of your Blog Here.</p> </div> <div class="blog-post well-formatting"> <h2 class="blog-post-title">Sample blog post Heading</h2> <p class="blog-post-meta">January 20, 2014 by <a href="#">Anil</a></p> <p>Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text. </p> <hr> <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> <blockquote> <p>Lorem ipsum dummy content of quote<strong> bold line of quote here</strong> Lorem ipsum dummy content of quote</p> </blockquote> <p>Blog post<em>content</em> here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text.</p> <h2> Post Inner Heading in post</h2> <p>Inner heading content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> <h3>Post sub-heading here</h3> <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <pre><code>code block example here</code></pre> <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> <h3>Again Sub-heading of post</h3> <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> <ul> <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text content.</li> <li>post content here which contain images, typography, <a href="#">quotes</a>, videos etc.</li> <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text etc.</li> </ul> <p>Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text.</p> <ol> <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text, graphics etc.</li> <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text content here.</li> <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text here.</li> </ol> <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> </div><!-- End .blog-post--> <div class="blog-post well-formatting"> <h2 class="blog-post-title">Another blog post Heading</h2> <p class="blog-post-meta">January 22, 2014 by <a href="#">Anil</a></p> <p>Blog post content here which contains images, typography, quotes, videos, text forms, etc. or write here dummy text. </p> <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> <blockquote> <p>Lorem ipsum dummy content of quote<strong> bold line of quote here</strong> Lorem ipsum dummy content of quote</p> </blockquote> <p>Blog post<em>content</em> here which contain images, typography, quotes, videos, text forms etc. or write here dummy text.</p> <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> <h3>Again Sub-heading of post</h3> <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> <ol> <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, dummy text.</li> <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text here.</li> <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text, forms here.</li> </ol> <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p> </div><!-- End .blog-post--> <ul class="pager pull-right"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </div><!-- End .left-col --> <div class="right-col blog-sidebar " id="sidebar"> <div class="sidebar-module"> <h4>About Us</h4> <p>WDR Template is<em> Responsive</em> template of a wordpress blog. This can help for creating simple responsive blog.</p> </div> <div class="list-group" > <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">Categories <span class="badge">8</span></h4> </a> <a href="#" class="list-group-item">Category 1</a> <a href="#" class="list-group-item">Category 2</a> <a href="#" class="list-group-item">Category 3</a> <a href="#" class="list-group-item">Category 4</a> <a href="#" class="list-group-item">Category 5</a> <a href="#" class="list-group-item">Category 6</a> <a href="#" class="list-group-item">Category 7</a> <a href="#" class="list-group-item">Category 8</a> </div> <div class="sidebar-module"> <h4>Archives</h4> <ul class="list-group"> <li class="list-group-item"><a href="#">August 2014</a></li> <li class="list-group-item"><a href="#">July 2014</a></li> <li class="list-group-item"><a href="#">May 2014</a></li> <li class="list-group-item"><a href="#">April 2014</a></li> <li class="list-group-item"><a href="#">November 2013</a></li> <li class="list-group-item"><a href="#">October 2013</a></li> <li class="list-group-item"><a href="#">September 2013</a></li> <li class="list-group-item"><a href="#">August 2013</a></li> <li class="list-group-item"><a href="#">July 2013</a></li> <li class="list-group-item"><a href="#">June 2013</a></li> <li class="list-group-item"><a href="#">May 2013</a></li> <li class="list-group-item"><a href="#">April 2013</a></li> <li class="list-group-item"><a href="#">March 2013</a></li> </ul> </div> <div class="sidebar-module"> <ul class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">Recent Posts</h4> </a> <li class="list-group-item"><a href="#">Post 1</a></li> <li class="list-group-item"><a href="#">Post 2</a></li> <li class="list-group-item"><a href="#">Post 3</a></li> </ul> </div> <div class="sidebar-module"> <ul class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">Recent Comments</h4> </a> <li class="list-group-item"><a href="#">Comment 1</a></li> <li class="list-group-item"><a href="#">Comment 2</a></li> <li class="list-group-item"><a href="#">Comment 3</a></li> </ul> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">Facebook Plugin</h3> </div> <div class="panel-body"> Plugin part here </div> </div> </div><!-- End .right-col--> </div><!--.row--> </div><!--.container--> <hr> <div class="container"> <div class="row" style="padding:0px 15px;"> <footer> <p class="pull-right"><a href="#">Back to top</a></p> <p>© 2014 WDR Template <a href="#">Privacy</a> <a href="#">Terms</a></p> </footer> </div> </div>
< /html >
Example: Css part of WDR template
Preview
Download
*{
margin:0px;
padding:0px;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before, .clearfix:after, .container:before, .container:after, .row:before, .row:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
display: table;
content: " ";
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
body {
display: block;
padding-bottom: 40px;
color: #5a5a5a;
background: #f0ad4e;
font-family: "Helvetica", Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
margin: 0px;
}
a {
text-decoration: none;
}
a:hover{
color: #bbb !important;
text-decoration: none !important;
}
ul, ol {
margin-top: 0;
margin-bottom: 10px;
}
header{
float:left;
}
.container {
width: 970px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
clear: both;
}
nav{
background: #444;
border-color: #080808;
top: 0;
border-width: 0 0 1px;
border-radius: 0;
position: fixed;
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.nav {
list-style: none;
float: right;
margin: 0;
padding-left: 0;
}
.navbar-logo {
float: left;
}
.navbar-brand {
float: left;
height: 20px;
padding: 15px 15px ;
font-size: 18px;
line-height: 20px;
color: #777;
}
.navbar-brand:hover{
background:#777;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
color: #777;
}
.navbar-nav > li > a:hover{
padding-top: 15px;
padding-bottom: 15px;
background:#777;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
color: #fff;
background-color: #080808;
}
.left-col{
width: 75%;
float:left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.right-col{
width: 18%;
float:left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 {
margin: .67em 0;
font-size: 2em;
}
h1, .h1 {
font-size: 36px;
}
h2, .h2 {
font-size: 30px;
}
h3, .h3 {
font-size: 24px;
}
h4, .h4 {
font-size: 18px;
}
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
.well-formatting {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well-formatting blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, .15);
}
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
p {
margin: 0 0 10px;
}
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
ol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.pull-right {
float: right !important;
}
.pager {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
.pager li {
display: inline;
}
.pager li > a, .pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
}
.pager li > a:hover, .pager li > a:focus {
text-decoration: none;
background-color: #eee;
}
.sidebar-module {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
margin: 0 -0px 15px;
}
i, cite, em, var, address, dfn {
font-style: italic;
}
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
a {
color: #428bca;
text-decoration: none;
}
a.list-group-item {
color: #555;
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: #428bca;
border-color: #428bca;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-danger {
border-color: #ebccd1;
}
.panel-danger > .panel-heading {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-body {
padding: 15px;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
width:100%;
float:left;
}
/* Responsive Css Using Media Queries Starts Here */
/* media queries Start Here */
@media all and (max-width:768px){
header {
float: left;
margin-bottom: 140px;
}
.container {
width: auto;
max-width:100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
clear: both;
}
.left-col {
width: auto;
max-width:100%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.right-col{
width:auto;
max-width:100%;
float:left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.navbar-logo {
float: left;
width:100%;
}
.navbar-brand {
float:none;
width:125px;
height: 20px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
color: #777;
margin: 0px auto;
display:block;
text-align:center;
}
.navigation{
width: 100%;
float: left;
text-align: center
}
.nav {
list-style: none;
float: none;
padding-left: 0;
width: 370px;
margin: 0px auto;
}
}
Web Design Reference Guide Android App for Website Developers
Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.
Other Related Posts
- HTML Tutorial – Learn How to Design an HTML Page
- Six Proven Ways to Earn Money from a Blog | Web Design Reference
- 24 Easy and Free SEO Tools to Improve Your Marketing
- CSS3 Gradient Tutorial and CSS3 Gradient Reference
- HTML Form Validation Using JavaScript Tutorial
- Google Fonts Implementation Guide – How to use Google Fonts
- Responsive Web Template Using Bootstrap Tutorial
- Responsive Web Template Tutorial Using Media Queries
- Learn Basic HTML5 Concept – HTML5 Reference Guide