FpTemplates: Tutorial

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
<img border="0" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfoEaEE_V9q22zEC3FADc-veGOz_igUdqU6BeFi_dzcSmnIePu_Orby-FO6uQr65gDOYpbfI4mA6I6teFt0hyphenhyphenPP_tBBulZSW1wmM8rAby90F3z5UbOO7ShfGvFfhUbUolDhI2oa24V8c8/s1600/responsive.png" width="640" /> 
Responsive Web Design is a best way to optimize
website viewing in different kind of devices such as desktop, tablet, mobile
etc</div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">

</div>
<div class="MsoNormal">
Difference between ordinary CSS Style sheet and
Responsive CSS Style sheet. 
 
In Responsive webdesign, some CSS style sheet element defined in %.</div>
<div class="MsoNormal">
In Responsive webdesign, CSS Style sheet contain @media
query to change rules and sizes based on various devices.</div>
<div class="MsoNormal">
Example: </div>
<div class="MsoNormal">
@media only screen
and (max-width: 480px) { write css code here.. } [for smart phones]</div>
<div class="MsoNormal">
@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]</div>
 
<div class="MsoNormal">
</div>
<div class="MsoNormal">

</div>
<div class="MsoNormal">
So How to
Create Responsive Web Design Based Website?</div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
Step 1: First create HTML file with CSS Id and Class
for your theme.</div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
We have already HTML and CSS file.. remember we had learn
how to convert <a href="http://www.freeandpremiumtemplates.com/2014/03/how-to-convert-psd-to-html-tutorial.html" target="_blank" title="Go to PSD to HTML Tutorial"><span style="background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto auto;">PSD to HTML</a> (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..</div>
<div class="MsoNormal">
We show you demo of website and code… so you can understand
which template convert into responsive design..</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggIdsC4RepBXfEJmOPP_hmuiUg8SMd9PZPtm_TIWoUrX-6fUayxq2WwoBQTc50olTgJMBa2atsPGSKx7-Hwj7_to6oPy-cseDytWxqDZHDDZOm2G-ZeUL3aSyOIeCsYxYxgz0-W92f7PY/s1600/Untitled-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggIdsC4RepBXfEJmOPP_hmuiUg8SMd9PZPtm_TIWoUrX-6fUayxq2WwoBQTc50olTgJMBa2atsPGSKx7-Hwj7_to6oPy-cseDytWxqDZHDDZOm2G-ZeUL3aSyOIeCsYxYxgz0-W92f7PY/s1600/Untitled-1.png" /></a></div>

<div class="MsoNormal">
HTML and CSS Code
here:
</div>
 
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;"> 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</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><!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">
 
 <div class="header">
 
 <div>
 
 <div class="socialicon">
 <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>
 
 </div>
 
 <div class="bottom">
 
 <div class="logo">
 
 <div class="titlebox">
 
 <span class="company-title">
 &nbsp;&nbsp;Company Name&nbsp;&nbsp;&nbsp;
 
 <br />
 <span class="tagline">Tag line goes here..
 
 </div>
 
 </div>
 
 <nav class="navigation">
 
 <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>
 
 </div>
 
 </div>
 
 <div class="container">
 
 <div class="containertop">
 
 <div class="slider">
 <img src="images/slider.png" alt="slider" />
 </div>
 
 <div class="sidebar">
 <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>
 
 </div>
 
 <div class="LatestNews">
 
 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>
 
 <div class="content">
 
 <div class="welcome">
 
 <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>
 
 <div class="schedule">
 
 <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>
 
 <div class="contact">
 
 <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>
 
 </div>
 
 </div>
 
 <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>
</body>
</html>
</pre>
</td></tr>
</tbody></table>
</div>
</div>
<body></body>

 
 
<div span="">


 </div>

<pre style="line-height: 125%; margin: 0;"> </pre>
<pre style="line-height: 125%; margin: 0;">CSS Code:
 </pre>
<pre style="line-height: 125%; margin: 0;">@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 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;
}

</pre>

<div class="MsoNormal">
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 </div>
. It
will say that your website page is properly scaled inside any screen size such
as mobile screen, tablet. 
 
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</pre>
</td></tr>
</tbody></table>
</div>
<div class="MsoNormal">
  </div>
<table><tbody>
<tr><td> </td><td></td></tr>
</tbody></table>

<div class="MsoNormal">
Step 3: Add
some Internet explorer tag for show responsive design in IE.</div>
<div class="MsoNormal">
 </div>
 
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7</pre>
</td><td><pre style="line-height: 125%; margin: 0;">


<html lang="en"> 

</pre>
</td></tr>
</tbody></table>
</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
 <tbody>
<tr style="mso-yfti-firstrow: yes; mso-yfti-irow: 0; mso-yfti-lastrow: yes;">
 <td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<html lang="en">
 </div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
</td>
 </tr>
</tbody></table>

<div class="MsoNormal">
So we create some changes in HTML file and CSS file..</div>
 
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;"> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><nav class="navigation">
 <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>
</pre>
</td></tr>
</tbody></table>
</div>
<div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
1    1.    Add  
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><a href="#" id="slide">Menu</a> 
</pre>
</td></tr>
</tbody></table>
</div>

line into navigation…</div>

<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
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..</div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
2    3.     Id=”slide” display none for desktop
cause we have normal menu for desktop..</div>
<div class="MsoNormal" style="margin-left: .25in;">
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..</div>
<div class="MsoNormal" style="margin-left: .25in;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihvrbPshsrxtNL8ls0t7MZrw_CJmSarRvJl610HYxSR3PDLTRHZh6iW-7JORwcTa5bnI7PmnzgpOiVToYbbX4XVUSVMxuVvdU6N5Jiw0iXxq6tPxNknkRoVEeAUeh4AJ2QqFTZdtgJfFM/s1600/mobilemenu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihvrbPshsrxtNL8ls0t7MZrw_CJmSarRvJl610HYxSR3PDLTRHZh6iW-7JORwcTa5bnI7PmnzgpOiVToYbbX4XVUSVMxuVvdU6N5Jiw0iXxq6tPxNknkRoVEeAUeh4AJ2QqFTZdtgJfFM/s1600/mobilemenu.png" /></a></div>
<div class="MsoNormal" style="margin-left: .25in;">
 </div>
 
<div class="MsoNormal" style="margin-left: .25in;">

</div>
<div class="MsoNormal" style="margin-left: .25in;">
So lets start convert
website design into Responsive design…..</div>
<div class="MsoNormal">
Step 4: Next add some media query inside your CSS</div>
<div class="MsoNormal">
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.</div>
<div class="MsoNormal">
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.. </div>
<div class="MsoNormal">
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:</div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
 </div>
 
 
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;"> 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</pre>
</td><td><pre style="line-height: 125%; margin: 0;">/* ==============================================================
 Custom Media Queries
================================================================= */
@media only screen and (min-width: 1024px) and (max-width: 1280px) {

/*wrapper css start */

/* wrapper css end */

/* header css start */

/* logo css start */

/* logo css end */

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

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

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

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

#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 ====================== */

.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 )
</pre>
</td></tr>
</tbody></table>
</div>

<div class="MsoNormal">
This css
code only for adjust the website design for small PC’s </div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
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…..</div>
<div class="MsoNormal">
Media
queries for big table or landscape view..</div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
 </div>
 
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;"> 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</pre>
</td><td><pre style="line-height: 125%; margin: 0;">/* Max width 1024px */

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

/*wrapper css start */

/* wrapper css end */

/* header css start */

/* logo css start */

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

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

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

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

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

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

#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;
}

} 
(close media query css)
</pre>
</td></tr>
</tbody></table>
</div>

<div class="MsoNormal">
Tablet
landscape view :--</div>
<div class="MsoNormal">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ivN9D57HtRxhp5GIC6CTwL0CBfRqVbgD0itxhVNKHXAE472-GJ1Hj0oQCjV9iZfHFa4TDoOfl0hqoaZC50xiHTdj5eu4-mnN8jOKm15MtuPaRVgtZQksU3crCtj3_3eE1_lj8QkPCNM/s1600/tablet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ivN9D57HtRxhp5GIC6CTwL0CBfRqVbgD0itxhVNKHXAE472-GJ1Hj0oQCjV9iZfHFa4TDoOfl0hqoaZC50xiHTdj5eu4-mnN8jOKm15MtuPaRVgtZQksU3crCtj3_3eE1_lj8QkPCNM/s1600/tablet.png" /></a></div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">

</div>
<div class="MsoNormal">
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;…</div>
<div class="MsoNormal">
Media
queries for small table or portrait view..</div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
 </div>
 
 
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;"> 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</pre>
</td><td><pre style="line-height: 125%; margin: 0;">/* Max width 768px */

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

/*wrapper css start */

/* wrapper css end */

/* header css start */

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

/* logo css start */

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

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

.slider{
display:none;
}

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

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

#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;
}

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

.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
</pre>
</td></tr>
</tbody></table>
</div>

<div class="MsoNormal">
Tablet
Portrait view :--</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-GTPleWyqeWyGXTM6RuW14FbES_BjeoD8V9eYVMvjMRwqDnfE2LU89wLT_aocLPYYmBbpQUOfDIlYfBZL3ujCZrcuZTHXLB11ZIHMGFLNUl0yfLHwhzMce0XHEE1vwXwd8g2lGes1zNk/s1600/tablet-portrait.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-GTPleWyqeWyGXTM6RuW14FbES_BjeoD8V9eYVMvjMRwqDnfE2LU89wLT_aocLPYYmBbpQUOfDIlYfBZL3ujCZrcuZTHXLB11ZIHMGFLNUl0yfLHwhzMce0XHEE1vwXwd8g2lGes1zNk/s1600/tablet-portrait.png" /></a></div>

<div class="MsoNormal">
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;…</div>
<div class="MsoNormal">
Media
queries for smart phones or landscape view..</div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
 </div>
 
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;"> 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</pre>
</td><td><pre style="line-height: 125%; margin: 0;">/* max width 480px */

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

/*wrapper css start */

/* wrapper css end */

/* header css start */

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

/* logo css start */

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

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

/* logo css end */

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

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

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

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

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

.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;
}

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

#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;
}

.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
</pre>
</td></tr>
</tbody></table>
</div>

<div class="MsoNormal">
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…</div>
<div class="MsoNormal">
Js code here
for mobile menu and service tab… write js code in Index.html file before
</div>
tag..

<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;"> 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</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><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>
</pre>
</td></tr>
</tbody></table>
</div>

<div class="MsoNormal">
Smart phone
landscape view:-</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidl_aKcnRgOeJ1zctpYi7SQqLe8xE01eo9rNYbvLKwmKea3PAVScmj7qmMe801jDfNl0OKxJoBuddT7-4P8YLsPBhzLeSWcfVfAJTpzZXYc8yUQJYnCh4pJbCvLkdmPIkObubW0CsE8w4/s1600/mobile.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidl_aKcnRgOeJ1zctpYi7SQqLe8xE01eo9rNYbvLKwmKea3PAVScmj7qmMe801jDfNl0OKxJoBuddT7-4P8YLsPBhzLeSWcfVfAJTpzZXYc8yUQJYnCh4pJbCvLkdmPIkObubW0CsE8w4/s1600/mobile.png" /></a></div>

<div class="MsoNormal">
Media
queries for smart phones or portrait view.. max width 320px :--</div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
CSS code
here……..</div>
<div class="MsoNormal">
 </div>
<div class="MsoNormal">
 </div>
 
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;"> 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</pre>
</td><td><pre style="line-height: 125%; margin: 0;">/* max width 320px */