Menu
» » » How To Create A Responsive Web Design


Responsive Web Design is a best way to optimize website viewing in different kind of devices such as desktop, tablet, mobile etc
Difference between ordinary CSS Style sheet and Responsive CSS Style sheet.

In Responsive webdesign, some CSS style sheet element defined in %.
In Responsive webdesign, CSS Style sheet contain @media query to change rules and sizes based on various devices.
Example:
@media only screen and (max-width: 480px) { write css code here.. } [for smart phones]
@media only screen and (max-width: 1024px) { write css code here.. } [for Tablets]
@media only screen and (min-width: 992px) { write css code here..} [for desktops]

So How to Create Responsive Web Design Based Website?

Step 1: First create HTML file with CSS Id and Class for your theme.

We have already HTML and CSS file.. remember we had learn how to convert PSD to HTML (Click on PSD to HTML link and learn How to Convert PSD to HTML) File so we use that HTML and CSS file.  so we start from converting the HTML file in to responsive design..
We show you demo of website and code… so you can understand which template convert into responsive design..




HTML and CSS Code here: 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Computer Maintenance</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<div id="wrapper"><!-- wrapper div strat -->
 
    <div class="header"><!-- header div start -->
     
        <div><!-- top div start -->
        
         <div class="socialicon"><!-- socialicon div start -->
             <ul>
                 <li><img src="images/facebook.png"  /></li>
                    <li><img src="images/in.png"  /></li>
                    <li><img src="images/twitter.png"  /></li>
                    <li><img src="images/flickr.png"  /></li>
                </ul>
            </div><!-- socialicon div end -->
        
        </div><!-- top div end -->
        
        <div class="bottom"><!-- bottom div start -->
         
            <div class="logo"><!-- logo div start -->
             
                <div class="titlebox"><!-- titlebox div start -->
                 
                    <span class="company-title">
                     &nbsp;&nbsp;Company Name&nbsp;&nbsp;&nbsp;
                    </span>
                    <br />
                    <span class="tagline">Tag line goes here..</span>
                    
                </div><!-- titlebox div end -->
                
            </div><!-- logo div end -->
            
            <nav class="navigation"><!-- navigation div start -->
             
                <ul>
                 <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Quick Contact</a></li>
                </ul>
                                 
            </nav><!-- navigation div end -->
        
        </div><!-- bottom div end -->
        
    </div><!-- header div end -->
    
    <div class="container"><!-- container div start -->
     
        <div class="containertop"><!-- containertop div start -->
         
            <div class="slider"><!-- slider div start -->
             <img src="images/slider.png" alt="slider"  />
            </div><!-- slider div end -->
            
            <div class="sidebar"><!-- sidebar div start -->
             <div class="widgettitle">&nbsp;&nbsp;Service</div>
                <ul>
                 <li><a href="#">No job is too small Mac or PC:</a></li>
                    <li><a href="#">Home ADSL.</a></li>
                    <li><a href="#">Wireless.</a></li>
                    <li><a href="#">Virus removal.</a></li>
                    <li><a href="#">Windows configuration </a></li>
                    <li><a href="#">and installation.</a></li>
                    <li><a href="#">Mac configuration and installation.</a></li>
                    <li><a href="#">Hardware.</a></li>
                </ul>
            </div><!-- sidebar div end -->
            
        </div><!-- containertop div end -->
        
        <div class="LatestNews"><!-- latestnews div start -->
         
            Latest news goes here, latest news goes here, latest news goes here, latest news goes here latest news goes here, latest news goes here...
        
        </div><!-- latestnews div end -->
        
        <div class="content"><!-- content div strat -->
        
         <div class="welcome"><!-- welcome div start -->
             
                <div id="title">
                 <h2>Welcome</h2>
                </div>
             
                <div id="post">
                 Welcome to company, company detail goes 
                    here, welcome to company, company detail 
                    goes here, welcome to company, company 
                    detail goes here, welcome to company, 
                    company detail goes here, welcome to company, 
                    company detail goes here,
                </div>
                
            </div><!-- welcome div end -->
            
            <div class="schedule"><!-- schedule div start -->
             
                <div id="title">
                 <h2>Schedule</h2>
                </div>
             
                <div id="post">
                 Welcome to company, company detail goes 
                    here, welcome to company, company detail 
                    goes here, welcome to company, company 
                    detail goes here, welcome to company, 
                    company detail goes here, welcome to company, 
                    company detail goes here,
                </div>
                
            </div><!-- schedule div end -->
        
            <div class="contact"><!-- contact div start -->
             
                <div id="title">
                 <h2>Contact</h2>
                </div>
             
                <div id="post">
                 Welcome to company, company detail goes 
                    here, welcome to company, company detail 
                    goes here, welcome to company, company 
                    detail goes here, welcome to company, 
                    company detail goes here, welcome to company, 
                    company detail goes here,
                </div>
                
            </div><!-- contact div end -->
            
        </div><!-- content div end -->
    
    </div><!-- container div end -->
    
    <div class="footer">
     <div class="footerTop">
         <div class="footerNav">
             <ul>
                 <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#" class="last">Term & Conditions</a></li>
                </ul>
            </div>
        </div>
        <div class="footerBottom">
         <div class="copyright">copyright 2011 @company.com | All rights are reserved</div>
            <div class="designDeveloped">Design & Developed By: ......................</div>
        </div>
    </div>

</div><!-- wrapperdiv end -->
</body>
</html>




 
CSS Code:
 
@charset "utf-8";
/* CSS Document */

body{
background:url(../images/bg.png) repeat-x;
}
/*wrapper css start */

#wrapper{
width:100%;
}

/* wrapper css end */

/* header css start */

.header{
width:100%;
}

/*******************social icon css start*********************/
.top{
width:100%;
padding:20px 0px;
}

.socialicon{
float:right;
margin-right:200px;
}

.socialicon ul{
list-style:none;
}

.socialicon ul li{
display:inline-block;
position:relative;
}
/*************social icon css end******************/

/* logo css start */

.bottom{
width:100%; 
padding:30px 0px;
height:50px;
margin-top:20px;
}

.logo{
width:25%;
float:left;
background-color:#0381c7;
padding:10px 10px;
}

.titlebox{
float:right;
text-align:center
}

.company-title{
font-family:'Arial', Helvetica, sans-serif;
font-size:1.313em;
color:#FFFFFF;
text-decoration:underline;
}

.tagline{
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#FFFFFF;
}

/* logo css end */

/* ---------------- Navigation Css Start ---------------- */

nav{
height:40px;
width:60%;
background:#0380c6;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
position: relative;  
float:left;
border-radius:5px;
margin-top:6px;
}


nav ul{
list-style:none;
padding:0px;
margin:0 auto;
height:40px;
width:100%;
}

nav li{
display:inline;
float:left;
line-height: 40px;  
text-shadow: 1px 1px 0px #283744;  
text-align: center;  
width:20%;
border-right: 1px solid #015597;  
box-sizing:border-box;  
-moz-box-sizing:border-box;  
-webkit-box-sizing:border-box;  
cursor:pointer;
}

nav li a{
color: #fff;
text-decoration: none;  
}

nav li.last{
border:none;
}

nav li:hover, nav a:active {  
background-color: #015597;
}  

.navigation {  
*zoom: 1;  
margin-left:10px;
}


/* ---------------- Navigation Css End ---------------- */


/* header css end */
/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

.container{
width:75%;
margin:0 auto;
}

.containertop{
width:100%;
height:360px;
}


.slider{
height:340px;
width:70.6%;
float:left;
background:#FFF;
border-radius:5px;
box-shadow: 0px 20px 20px -10px #000;
}

.sidebar{
width:27%;
float:right;
background:#FFFFFF;
border-radius:5px;
height:340px;
box-shadow: 0px 20px 20px -10px #000;
}

.widgettitle{
width:100%;
height:auto;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
color:#FFFFFF;
background-color:#0175b9;
line-height:40px;
box-shadow: inset #005595 0px 0px 15px 10px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}

.sidebar ul{
list-style:none;
width:95%;
padding-left:10px;
}

.sidebar li{
width:100%;
display:block;
border-bottom:#999999 dotted 1px;
line-height:150%;
}

.sidebar li a{
text-decoration:none;
color:#525252;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
}

.LatestNews{
width:100%;
padding:10px 0px;
text-align:center;
background-color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
color:#515151;
}

.content{
width:100%;
height:auto;
padding-top:10px;
}

#content{
background:#FFF;
width:99.9%;
height:auto;
border-radius:10px;
}

#title{
text-align:justify;
width:99.9%;
height:auto;
padding-top:10px;
}
#title h2{
font-family:'Arial', Helvetica, sans-serif;
font-size:18px;
color:#FFF;
text-shadow:#999 2px 2px 2px;
border-bottom:#4e4e4e 3px solid;
padding-bottom:5px;
}

#post{
font-family:'Arial', Helvetica, sans-serif;
font-size:14px;
color:#000;
line-height:25px;
text-shadow:#999 2px 2px 2px;
padding-top:10px;
padding-bottom:10px;
text-align:left;
}

.welcome{
float:left;
width:30%;
height:230px;
padding-bottom:9px;
}

.schedule{
float:left;
width:32%;
height:230px;
border-left:#FFFFFF 2px solid;
margin-left:15px;
padding-left:12px;
padding-bottom:9px;
}

.contact{
float:right;
width:30%;
height:230px;
border-left:#FFFFFF 2px solid;
margin-left:15px;
padding-left:12px;
padding-bottom:9px;
}


/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

/* ================ footer start ====================== */

.footer{
width:100%;
clear:both;
height:72px;
background:#000000;
}

.footerTop{
width:75%;
height:auto;
margin:0 auto;
padding-top:10px;
}

.footerNav{
width:68%;
margin:0 auto;
padding-top:5px;
}

.footerNav ul{
width:70%;
list-style:none;
padding:0px;
margin:0 auto;
}

.footerNav li{ 
display:inline-block;
margin:0px;
}

.footerNav li a{
color:#FFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
border-right:#FFFFFF thin solid;
padding-right:5px;
text-align:center;
}

.footerNav li a.last{
border:none;
}

.footerBottom{
width:75%;
margin:0 auto;
clear:both;
padding-top:8px;
}

.copyright{
width:42%;
float:left;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
}

.designDeveloped{
width:30%;
float:right;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
text-align:right;
}
/* ================ footer end ======================== */

Step 2: Add View port Meta tag

First of all you need to trigger browser to render your website page more readable scale. So add following meta viewport tag before
. It will say that your website page is properly scaled inside any screen size such as mobile screen, tablet.

1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 



Step 3: Add some Internet explorer tag for show responsive design in IE.


1
2
3
4
5
6
7
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->



So we create some changes in HTML file and CSS file..

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<nav class="navigation"><!-- navigation div start -->
             <a href="#" id="slide">Menu</a>
                <ul>
                 <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Quick Contact</a></li>
                </ul>
                                 
            </nav><!-- navigation div end -->
1    1.    Add 
1
<a href="#" id="slide">Menu</a>
line into navigation…

1    2.       Add id=”slide” in to css file.. cause we create for mobile menu when open website in mobile device then navigation menu change for mobile device..
2    3.     Id=”slide” display none for desktop cause we have normal menu for desktop..
Slide id works on mobile device or tablet when website open in smart phone’s then navigation menu change normal view into mobile menu look at below..



So lets start convert website design into Responsive design…..
Step 4: Next add some media query inside your CSS
If you want to create responsive design, first you need to assign or edit some media query inside your .CSS style sheet file.

Media queries are used to skip or change CSS rules in minimum or maximum width of devices.
You put or css code into media queries as your need.. mainly tablet size is 1024px and mobile size is 480px or 320px so your css code change under media queries as a device size.. cause media queries work as logical css media queries detect the device size and convert the website design according to device if you code for device in media queries..
Now we adjust our website design max-width 1280px to min-width 1024px; for desktop cause some desktop screen size 1280px and below so we adjust for small width size desktop design.. see css code below:




  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
/* ==============================================================
     Custom Media Queries
================================================================= */
@media only screen and (min-width: 1024px) and (max-width: 1280px) {

/*wrapper css start */

#wrapper{
width:100%;
}

/* wrapper css end */

/* header css start */

.header{
width:100%;
}

/*******************social icon css start*********************/
.top{
width:100%;
padding:20px 0px;
}

.socialicon{
float:right;
margin-right:200px;
}

.socialicon ul{
list-style:none;
}

.socialicon ul li{
display:inline-block;
position:relative;
}
/*************social icon css end******************/

/* logo css start */

.bottom{
width:100%; 
padding:30px 0px;
height:50px;
margin-top:20px;
}

.logo{
width:25%;
float:left;
background-color:#0381c7;
padding:10px 10px;
}

.titlebox{
float:right;
text-align:center
}

.company-title{
font-family:'Arial', Helvetica, sans-serif;
font-size:1.313em;
color:#FFFFFF;
text-decoration:underline;
}

.tagline{
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#FFFFFF;
}

/* logo css end */

/* ---------------- Navigation Css Start ---------------- */

nav{
height:40px;
width:60%;
background:#0380c6;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
position: relative;  
float:left;
border-radius:5px;
margin-top:6px;
}


nav ul{
list-style:none;
padding:0px;
margin:0 auto;
height:40px;
width:100%;
}

nav li{
display:inline;
float:left;
line-height: 40px;  
text-shadow: 1px 1px 0px #283744;  
text-align: center;  
width:20%;
border-right: 1px solid #015597;  
box-sizing:border-box;  
-moz-box-sizing:border-box;  
-webkit-box-sizing:border-box;  
cursor:pointer;
}

nav li a{
color: #fff;
text-decoration: none;  
}

nav li.last{
border:none;
}

nav li:hover, nav a:active {  
background-color: #015597;
}  

.navigation {  
*zoom: 1;  
margin-left:10px;
}


/* ---------------- Navigation Css End ---------------- */


/* header css end */
/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

.container{
width:75%;
margin:0 auto;
}

.containertop{
width:100%;
height:360px;
}


.slider{
width:70.6%;
float:left;
background:#FFF;
border-radius:5px;
box-shadow: 0px 20px 20px -10px #000;
}

.sidebar{
width:27%;
float:right;
background:#FFFFFF;
border-radius:5px;
height:340px;
box-shadow: 0px 20px 20px -10px #000;
}

.widgettitle{
width:100%;
height:auto;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
color:#FFFFFF;
background-color:#0175b9;
line-height:40px;
box-shadow: inset #005595 0px 0px 15px 10px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}

.sidebar ul{
list-style:none;
width:95%;
padding-left:10px;
}

.sidebar li{
width:100%;
display:block;
border-bottom:#999999 dotted 1px;
line-height:150%;
}

.sidebar li a{
text-decoration:none;
color:#525252;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
}

.LatestNews{
width:100%;
padding:10px 0px;
text-align:center;
background-color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
color:#515151;
}

.content{
width:100%;
height:auto;
padding-top:10px;
}


#title{
text-align:justify;
width:99.9%;
height:auto;
padding-top:10px;
}
#title h2{
font-family:'Arial', Helvetica, sans-serif;
font-size:18px;
color:#FFF;
text-shadow:#999 2px 2px 2px;
border-bottom:#4e4e4e 3px solid;
padding-bottom:5px;
}

#post{
font-family:'Arial', Helvetica, sans-serif;
font-size:14px;
color:#000;
line-height:20px;
text-shadow:#999 2px 2px 2px;
padding-top:0px;
padding-bottom:0px;
text-align:left;
}

.welcome{
float:left;
width:30%;
height:220px;
padding-bottom:0px;
}

.schedule{
float:left;
width:32%;
height:220px;
border-left:#FFFFFF 2px solid;
margin-left:15px;
padding-left:12px;
padding-bottom:0px;
}

.contact{
float:right;
width:30%;
height:220px;
border-left:#FFFFFF 2px solid;
margin-left:15px;
padding-left:12px;
padding-bottom:0px;
}


/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

/* ================ footer start ====================== */

.footer{
width:100%;
clear:both;
height:72px;
background:#000000;
}

.footerTop{
width:75%;
height:auto;
margin:0 auto;
padding-top:10px;
}

.footerNav{
width:68%;
margin:0 auto;
padding-top:5px;
}

.footerNav ul{
width:70%;
list-style:none;
padding:0px;
margin:0 auto;
}

.footerNav li{ 
display:inline-block;
margin:0px;
}

.footerNav li a{
color:#FFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
border-right:#FFFFFF thin solid;
padding-right:5px;
text-align:center;
}

.footerNav li a.last{
border:none;
}

.footerBottom{
width:75%;
margin:0 auto;
clear:both;
padding-top:8px;
}

.copyright{
width:42%;
float:left;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
}

.designDeveloped{
width:30%;
float:right;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
text-align:right;
}
/* ================ footer end ======================== */
.responsiveimg{
width:100%;
height:340px;
}
} (close media queries brackets )



This css code only for adjust the website design for small PC’s

Now we make style css for tablets.. mainly tablet width size 1024px to 768px so css code write under max-width:1024px and min-width:768px;… tablet’s media queries given below…..
Media queries for big table or landscape view..



  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
/* Max width 1024px */

@media only screen and (min-width: 768px) and (max-width: 1024px) {

/*wrapper css start */

#wrapper{
width:100%;
}

/* wrapper css end */

/* header css start */

.header{
width:100%;
}

/*******************social icon css start*********************/
.top{
width:100%;
padding:20px 0px;
}

.socialicon{
float:right;
margin-right:150px;
}

.socialicon ul{
list-style:none;
}

.socialicon ul li{
display:inline-block;
position:relative;
}
/*************social icon css end******************/

/* logo css start */

.bottom{
width:100%; 
padding:30px 0px;
height:50px;
margin-top:20px;
}

.logo{
width:25%;
float:left;
background-color:#0381c7;
padding:10px 10px;
}

.titlebox{
float:right;
text-align:center
}

.company-title{
font-family:'Arial', Helvetica, sans-serif;
font-size:1.313em;
color:#FFFFFF;
text-decoration:underline;
}

.tagline{
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#FFFFFF;
}

/* logo css end */

/* ---------------- Navigation Css Start ---------------- */

nav{
height:40px;
width:60%;
background:#0380c6;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
position: relative;  
float:left;
border-radius:5px;
margin-top:6px;
}


nav ul{
list-style:none;
padding:0px;
margin:0 auto;
height:40px;
width:100%;
}

nav li{
display:inline;
float:left;
line-height: 40px;  
text-shadow: 1px 1px 0px #283744;  
text-align: center;  
width:20%;
border-right: 1px solid #015597;  
box-sizing:border-box;  
-moz-box-sizing:border-box;  
-webkit-box-sizing:border-box;  
cursor:pointer;
}

nav li a{
color: #fff;
text-decoration: none;  
}

nav li.last{
border:none;
}

nav li:hover, nav a:active {  
background-color: #015597;
}  

.navigation {  
*zoom: 1;  
margin-left:10px;
}


/* ---------------- Navigation Css End ---------------- */


/* header css end */
/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

.container{
width:99%;
margin:0 auto;
}

.containertop{
width:100%;
height:280px;
}


.slider{
width:70.6%;
float:left;
background:#FFF;
border-radius:5px;
box-shadow: 0px 20px 20px -10px #000;
height:auto;
}

.sidebar{
width:27%;
float:right;
background:#FFFFFF;
border-radius:5px;
height:auto;
box-shadow: 0px 20px 20px -10px #000;
}

.widgettitle{
width:100%;
height:auto;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
color:#FFFFFF;
background-color:#0175b9;
line-height:40px;
box-shadow: inset #005595 0px 0px 15px 10px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}

.sidebar ul{
list-style:none;
width:95%;
padding-left:10px;
}

.sidebar li{
width:100%;
display:block;
border-bottom:#999999 dotted 1px;
line-height:150%;
}

.sidebar li a{
text-decoration:none;
color:#525252;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.600em;
}

.LatestNews{
width:100%;
padding:10px 0px;
text-align:center;
background-color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#515151;
}

.content{
width:100%;
height:auto;
padding-top:10px;
}


#title{
text-align:justify;
width:99.9%;
height:auto;
padding-top:10px;
}
#title h2{
font-family:'Arial', Helvetica, sans-serif;
font-size:14px;
color:#FFF;
text-shadow:#999 2px 2px 2px;
border-bottom:#4e4e4e 3px solid;
padding-bottom:5px;
}

#post{
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
color:#000;
line-height:20px;
text-shadow:#999 2px 2px 2px;
padding-top:0px;
padding-bottom:0px;
text-align:left;
}

.welcome{
float:left;
width:99.9%;
height:auto;
padding-bottom:0px;
}

.schedule{
float:left;
width:99.9%;
height:auto;
border:none;
margin-left:0px;
padding-left:0px;
padding-bottom:0px;
}

.contact{
float:right;
width:99.9%;
height:auto;
border:none;
margin-left:0px;
padding-left:0px;
padding-bottom:0px;
}


/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

/* ================ footer start ====================== */

.footer{
width:100%;
clear:both;
height:80px;
background:#000000;
}

.footerTop{
width:99.9%;
height:auto;
margin:0 auto;
padding-top:10px;
text-align:center;
}

.footerNav{
width:99%;
margin:0 auto;
padding-top:5px;
}

.footerNav ul{
width:70%;
list-style:none;
padding:0px;
margin:0 auto;
}

.footerNav li{ 
display:inline-block;
margin:0px;
}

.footerNav li a{
color:#FFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
border-right:#FFFFFF thin solid;
padding-right:5px;
text-align:center;
}

.footerNav li a.last{
border:none;
}

.footerBottom{
width:75%;
margin:0 auto;
clear:both;
padding-top:8px;
}

.copyright{
width:42%;
float:left;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
}

.designDeveloped{
width:30%;
float:right;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
text-align:right;
}
/* ================ footer end ======================== */
.responsiveimg{
width:100%;
height:auto;
}

}  
(close media query css)



Tablet landscape view :--


Now we make style css for small tablets.. tablet width size 768px to 480px so css code write under max-width:768px and min-width:480px;…
Media queries for small table or portrait view..




  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
/* Max width 768px */

@media only screen and (min-width: 480px) and (max-width: 768px) {

/*wrapper css start */

#wrapper{
width:100%;
}

/* wrapper css end */

/* header css start */

.header{
width:100%;
}

/*******************social icon css start*********************/
.top{
width:100%;
padding:20px 0px;
}

.socialicon{
float:left;
margin-left:15px;
}

.socialicon ul{
list-style:none;
}

.socialicon ul li{
display:inline-block;
position:relative;
}
/*************social icon css end******************/

/* logo css start */

.bottom{
width:100%; 
padding:30px 0px;
height:50px;
margin-top:20px;
}

.logo{
width:40%;
float:left;
background-color:#0381c7;
padding:10px 10px;
}

.titlebox{
float:right;
text-align:center
}

.company-title{
font-family:'Arial', Helvetica, sans-serif;
font-size:1.313em;
color:#FFFFFF;
text-decoration:underline;
}

.tagline{
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#FFFFFF;
}

/* logo css end */

/* ---------------- Navigation Css Start ---------------- */

nav {  
border-bottom: 0;  
background:#0380c6; 
width:40%;
float:right;
margin-right:5px;
}  

nav ul {  
background:#0380c6;
display: none;  
height: auto; 
margin-top:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top:#CCCCCC thin solid;
}  

nav li {  
display: block;  
float: none;  
width: 100%;  
border:none;
}  

nav a#slide {  
display: block;  
width: 95%;
height:36px;   
position: relative;
text-align:left;
top:10px;
left:8px;
text-decoration:none;
color:#FFFFFF;
background:none;
}  

nav a#slide:after {  
content:"";  
background:url(../images/nav-icon.png) no-repeat;  
width: 40px;  
height: 30px;  
display: inline-block;  
position: absolute;  
right: 5px;
top:-5px;
}

.navigation:before,  
.navigation:after {  
content: " ";  
display: table;  
}

.navigation:after {  
clear: both;  
}  
.navigation {  
*zoom: 1;  
margin-left:0px;
margin-top:10px;
}


/* ---------------- Navigation Css End ---------------- */


/* header css end */
/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

.container{
width:99%;
margin:0 auto;
}

.containertop{
width:100%;
height:280px;
}


.slider{
display:none;
}

.sidebar{
width:99.9%;
float:right;
background:#FFFFFF;
border-radius:5px;
height:auto;
box-shadow: 0px 20px 20px -10px #000;
}

.widgettitle{
width:100%;
height:auto;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
color:#FFFFFF;
background-color:#0175b9;
line-height:40px;
box-shadow: inset #005595 0px 0px 15px 10px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}

.sidebar ul{
list-style:none;
width:95%;
padding-left:10px;
}

.sidebar li{
width:100%;
display:block;
border-bottom:#999999 dotted 1px;
line-height:150%;
}

.sidebar li a{
text-decoration:none;
color:#525252;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.600em;
}

.LatestNews{
width:100%;
padding:10px 0px;
text-align:center;
background-color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#515151;
}

.content{
width:100%;
height:auto;
padding-top:10px;
}


#title{
text-align:justify;
width:99.9%;
height:auto;
padding-top:10px;
}
#title h2{
font-family:'Arial', Helvetica, sans-serif;
font-size:14px;
color:#FFF;
text-shadow:#999 2px 2px 2px;
border-bottom:#4e4e4e 3px solid;
padding-bottom:5px;
}

#post{
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
color:#000;
line-height:20px;
text-shadow:#999 2px 2px 2px;
padding-top:0px;
padding-bottom:0px;
text-align:left;
}

.welcome{
float:left;
width:99.9%;
height:auto;
padding-bottom:0px;
}

.schedule{
float:left;
width:99.9%;
height:auto;
border:none;
margin-left:0px;
padding-left:0px;
padding-bottom:0px;
}

.contact{
float:right;
width:99.9%;
height:auto;
border:none;
margin-left:0px;
padding-left:0px;
padding-bottom:0px;
}


/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

/* ================ footer start ====================== */

.footer{
width:100%;
clear:both;
height:90px;
background:#000000;
}

.footerTop{
width:99.9%;
height:auto;
margin:0 auto;
padding-top:5px;
text-align:center;
}

.footerNav{
width:99%;
margin:0 auto;
padding-top:5px;
}

.footerNav ul{
width:99%;
list-style:none;
padding:0px;
margin:0 auto;
}

.footerNav li{ 
display:inline-block;
margin:0px;
}

.footerNav li a{
color:#FFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
border-right:#FFFFFF thin solid;
padding-right:5px;
text-align:center;
}

.footerNav li a.last{
border:none;
}

.footerBottom{
width:90%;
margin:0 auto;
clear:both;
padding-top:8px;
}

.copyright{
width:42%;
float:left;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
}

.designDeveloped{
width:30%;
float:right;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
text-align:right;
}
/* ================ footer end ======================== */
.responsiveimg{
width:100%;
height:auto;
}
} close media query tag



Tablet Portrait view :--



Now we make style css for Smart Phones.. width size 480px to 320px so css code write under max-width:480px and min-width:320px;…
Media queries for smart phones or landscape view..



  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
/* max width 480px */

@media only screen and (min-width: 320px) and (max-width: 480px) {

/*wrapper css start */

#wrapper{
width:100%;
}

/* wrapper css end */

/* header css start */

.header{
width:100%;
}

/*******************social icon css start*********************/
.top{
width:100%;
padding:20px 0px;
}

.socialicon{
float:left;
margin-left:15px;
}

.socialicon ul{
list-style:none;
}

.socialicon ul li{
display:inline-block;
position:relative;
}
/*************social icon css end******************/

/* logo css start */

.bottom{
width:100%; 
padding:30px 0px;
height:50px;
margin-top:20px;
}

.logo{
width:99.9%;
float:left;
background-color:#0381c7;
padding:10px 0px;
}

.titlebox{
float:none;
text-align:center
}

.company-title{
font-family:'Arial', Helvetica, sans-serif;
font-size:1.313em;
color:#FFFFFF;
text-decoration:underline;
}

.tagline{
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#FFFFFF;
}

/* logo css end */

/* ---------------- Navigation Css Start ---------------- */

nav {  
border-bottom: 0;  
background:#0380c6; 
width:99.9%;
float:right;
margin-right:0px;
margin-bottom:10px;
}  

nav ul {  
background:#0380c6;
display: none;  
height: auto; 
margin-top:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top:#CCCCCC thin solid;
}  

nav li {  
display: block;  
float: none;  
width: 100%;  
border:none;
}  

nav a#slide {  
display: block;  
width: 95%;
height:36px;   
position: relative;
text-align:left;
top:10px;
left:8px;
text-decoration:none;
color:#FFFFFF;
background:none;
}  

nav a#slide:after {  
content:"";  
background:url(../images/nav-icon.png) no-repeat;  
width: 40px;  
height: 30px;  
display: inline-block;  
position: absolute;  
right: 5px;
top:-5px;
}

.navigation:before,  
.navigation:after {  
content: " ";  
display: table;  
}

.navigation:after {  
clear: both;  
}  
.navigation {  
*zoom: 1;  
margin-left:0px;
margin-top:20px;
}


/* ---------------- Navigation Css End ---------------- */


/* header css end */
/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

.container{
width:99%;
margin:0 auto;
}

.containertop{
width:100%;
height:180px;
}


.slider{
display:none;
}

.sidebar{
width:99.9%;
float:right;
background:#FFFFFF;
border-radius:5px;
height:auto;
box-shadow: 0px 20px 20px -10px #000;
margin-top:20px;
}

.widgettitle{
background:url(../images/nav-icon.png) no-repeat;
background-size:40px 30px;
background-position:right;
width:100%;
height:auto;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
color:#FFFFFF;
background-color:#0175b9;
line-height:40px;
box-shadow: inset #005595 0px 0px 15px 10px;
border-top-left-radius:5px;
border-top-right-radius:5px;
cursor:pointer;
}

.sidebar ul{
list-style:none;
width:95%;
padding-left:10px;
display:none;
height:auto;
position:absolute;
background:#FFF;
}

.sidebar li{
width:100%;
display:block;
border-bottom:#999999 dotted 1px;
line-height:150%;
}

.sidebar li a{
text-decoration:none;
color:#525252;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.600em;
}

.LatestNews{
width:100%;
padding:10px 0px;
text-align:center;
background-color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#515151;
}

.content{
width:100%;
height:auto;
padding-top:10px;
}


#title{
text-align:justify;
width:99.9%;
height:auto;
padding-top:10px;
}
#title h2{
font-family:'Arial', Helvetica, sans-serif;
font-size:14px;
color:#FFF;
text-shadow:#999 2px 2px 2px;
border-bottom:#4e4e4e 3px solid;
padding-bottom:5px;
}

#post{
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
color:#000;
line-height:20px;
text-shadow:#999 2px 2px 2px;
padding-top:0px;
padding-bottom:0px;
text-align:left;
}

.welcome{
float:left;
width:99.9%;
height:auto;
padding-bottom:0px;
}

.schedule{
float:left;
width:99.9%;
height:auto;
border:none;
margin-left:0px;
padding-left:0px;
padding-bottom:0px;
}

.contact{
float:right;
width:99.9%;
height:auto;
border:none;
margin-left:0px;
padding-left:0px;
padding-bottom:0px;
}


/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

/* ================ footer start ====================== */

.footer{
width:100%;
clear:both;
height:110px;
background:#000000;
padding-top:20px;
}

.footerTop{
width:99.9%;
height:auto;
margin:0 auto;
padding-top:5px;
text-align:center;
}

.footerNav{
width:99%;
margin:0 auto;
padding-top:5px;
}

.footerNav ul{
width:99%;
list-style:none;
padding:0px;
margin:0 auto;
}

.footerNav li{ 
display:inline-block;
margin:0px;
}

.footerNav li a{
color:#FFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
border-right:#FFFFFF thin solid;
padding-right:5px;
text-align:center;
}

.footerNav li a.last{
border:none;
}

.footerBottom{
width:90%;
margin:0 auto;
clear:both;
padding-top:8px;
}

.copyright{
width:99%;
float:none;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
text-align:center;
}

.designDeveloped{
width:99%;
float:none;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
text-align:center;
margin-top:5px;
}
/* ================ footer end ======================== */
.responsiveimg{
width:100%;
height:auto;
}
} close media query tag



In smart phone we was not need to slider so we define display:none property and disable slider if you want slider than make css for slider in media query and adjust slider.. and service sidebar css change and use display:none property for service li tag and use js code display services click on service tab…
Js code here for mobile menu and service tab… write js code in Index.html file before
tag..  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(function() {  
        var slide        = $('#slide');  
            menu        = $('nav ul');  
            menuHeight  = menu.height(); 
   widgettitle        = $('.widgettitle');  
            service        = $('.sidebar ul');  
            serviceHeight  = service.height();  
      
        $(slide).on('click', function(e) {  
            e.preventDefault();  
            menu.slideToggle();  
        });  
  $(widgettitle).on('click', function(e) {  
            e.preventDefault();  
            service.slideToggle();  
        });  
    });
    
 $(window).resize(function(){  
        var w = $(window).width();  
        if(w > 320 && menu.is(':hidden')) {  
            menu.removeAttr('style');  
        }  
    });
});      
</script>



Smart phone landscape view:-



Media queries for smart phones or portrait view.. max width 320px :--

CSS code here……..



  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
/* max width 320px */

@media only screen and (max-width: 320px) {

/*wrapper css start */

#wrapper{
width:100%;
}

/* wrapper css end */

/* header css start */

.header{
width:100%;
}

/*******************social icon css start*********************/
.top{
width:100%;
padding:20px 0px;
}

.socialicon{
float:left;
margin-left:15px;
}

.socialicon ul{
list-style:none;
}

.socialicon ul li{
display:inline-block;
position:relative;
}
/*************social icon css end******************/

/* logo css start */

.bottom{
width:100%; 
padding:30px 0px;
height:50px;
margin-top:20px;
}

.logo{
width:99.9%;
float:left;
background-color:#0381c7;
padding:10px 0px;
}

.titlebox{
float:none;
text-align:center
}

.company-title{
font-family:'Arial', Helvetica, sans-serif;
font-size:1.313em;
color:#FFFFFF;
text-decoration:underline;
}

.tagline{
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#FFFFFF;
}

/* logo css end */

/* ---------------- Navigation Css Start ---------------- */

nav {  
border-bottom: 0;  
background:#0380c6; 
width:99.9%;
float:right;
margin-right:0px;
margin-bottom:10px;
}  

nav ul {  
background:#0380c6;
display: none;  
height: auto; 
margin-top:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top:#CCCCCC thin solid;
}  

nav li {  
display: block;  
float: none;  
width: 100%;  
border:none;
}  

nav a#slide {  
display: block;  
width: 95%;
height:36px;   
position: relative;
text-align:left;
top:10px;
left:8px;
text-decoration:none;
color:#FFFFFF;
background:none;
}  

nav a#slide:after {  
content:"";  
background:url(../images/nav-icon.png) no-repeat;  
width: 40px;  
height: 30px;  
display: inline-block;  
position: absolute;  
right: 5px;
top:-5px;
}

.navigation:before,  
.navigation:after {  
content: " ";  
display: table;  
}

.navigation:after {  
clear: both;  
}  
.navigation {  
*zoom: 1;  
margin-left:0px;
margin-top:20px;
}


/* ---------------- Navigation Css End ---------------- */


/* header css end */
/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

.container{
width:99%;
margin:0 auto;
}

.containertop{
width:100%;
height:180px;
}


.slider{
display:none;
}

.sidebar{
width:99.9%;
float:right;
background:#FFFFFF;
border-radius:5px;
height:auto;
box-shadow: 0px 20px 20px -10px #000;
margin-top:20px;
}

.widgettitle{
background:url(../images/nav-icon.png) no-repeat;
background-size:40px 30px;
background-position:right;
width:100%;
height:auto;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.938em;
color:#FFFFFF;
background-color:#0175b9;
line-height:40px;
box-shadow: inset #005595 0px 0px 15px 10px;
border-top-left-radius:5px;
border-top-right-radius:5px;
cursor:pointer;
}

.sidebar ul{
list-style:none;
width:95%;
padding-left:10px;
display:none;
height:auto;
position:absolute;
background:#FFF;
}

.sidebar li{
width:100%;
display:block;
border-bottom:#999999 dotted 1px;
line-height:150%;
}

.sidebar li a{
text-decoration:none;
color:#525252;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.600em;
}

.LatestNews{
width:100%;
padding:10px 0px;
text-align:center;
background-color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:0.750em;
color:#515151;
}

.content{
width:100%;
height:auto;
padding-top:10px;
}


#title{
text-align:justify;
width:99.9%;
height:auto;
padding-top:10px;
}
#title h2{
font-family:'Arial', Helvetica, sans-serif;
font-size:14px;
color:#FFF;
text-shadow:#999 2px 2px 2px;
border-bottom:#4e4e4e 3px solid;
padding-bottom:5px;
}

#post{
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
color:#000;
line-height:20px;
text-shadow:#999 2px 2px 2px;
padding-top:0px;
padding-bottom:0px;
text-align:left;
}

.welcome{
float:left;
width:99.9%;
height:auto;
padding-bottom:0px;
}

.schedule{
float:left;
width:99.9%;
height:auto;
border:none;
margin-left:0px;
padding-left:0px;
padding-bottom:0px;
}

.contact{
float:right;
width:99.9%;
height:auto;
border:none;
margin-left:0px;
padding-left:0px;
padding-bottom:0px;
}


/* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */

/* ================ footer start ====================== */

.footer{
width:100%;
clear:both;
height:110px;
background:#000000;
padding-top:20px;
}

.footerTop{
width:99.9%;
height:auto;
margin:0 auto;
padding-top:5px;
text-align:center;
}

.footerNav{
width:99%;
margin:0 auto;
padding-top:5px;
}

.footerNav ul{
width:99%;
list-style:none;
padding:0px;
margin:0 auto;
}

.footerNav li{ 
display:inline-block;
margin:0px;
}

.footerNav li a{
color:#FFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
border-right:#FFFFFF thin solid;
padding-right:5px;
text-align:center;
}

.footerNav li a.last{
border:none;
}

.footerBottom{
width:90%;
margin:0 auto;
clear:both;
padding-top:8px;
}

.copyright{
width:99%;
float:none;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
text-align:center;
}

.designDeveloped{
width:99%;
float:none;
color:#FFFFFF;
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
text-align:center;
margin-top:5px;
}
/* ================ footer end ======================== */
.responsiveimg{
width:100%;
height:auto;
}
} close media query tag
Portrait view :--



We’re done, Finally!

Now save your file and open this file in your browser. Scale your browser to check its responsive.
You can also check responsive design at http://www.responsinator.com/ upload your file your hosting server and type your website link into http://www.responsinator.com/ and see hows look your website design on different device’s..
So please tell me How was the tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below. Also, for the next tutorial I’m going teach you how to make PSD to Wordpress Theme.

If you liked this tutorial kindly share it with your friends. Thanks! :)
Posted by
Labels: ,
at 04:33
Next
Newer Post
Previous
This is the last post.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top