Responsive Web Template Tutorial Using Media Queries Tutorial

Published on: October 29, 2014   Last Updated on : January 9, 2018   Posted By : WebDesignReference


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

Author: WebDesignReference

I am a Senior Web Designer.

 

Leave a Reply