Responsive Web Template Tutorial Using Media Queries

Published on: October 29, 2014   Last Updated on : June 1, 2018   Posted By : WebDesignReference


Responsive Web Template Tutorial Using Media Queries

Responsive Web 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

< !DOCTYPE html >
< html >
< head >
< meta charset=”UTF-8″ >
< title > WDR Responsive Web Template < /title >
< /head >
< body >
< /body >
< /html >
Step 2 : Include meta viewport tag into html5 Document

Example : Include meta viewport tag

< meta name=”viewport” content=”width=device-width, initial-scale=1.0″/ >
Step 3 : Include stylesheet.css, html5shiv.js and respond.js into html5 Document

Example : Include stylesheet.css, html5shiv.js and respond.js to the document

< !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 >
Step 4 : Create Header part of WDR template.

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 >
<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 >
Step 5 : Create Content part of WDR template.

Example : Create Content 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 >
<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 >
Step 6 : Create Footer part of WDR template.

Example : 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 >
<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> <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>
< /body >
< /html >
Step 7 : Css (style.css) part of WDR template.

Example : Css part of WDR template

*{
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;
}

}
Preview Download

Also Related to HTML5

 

Leave a Reply