Jayesh Patel
Filed under - CSS, Design, HTML5 & CSS3, Other Stuff, Web Designer Help
No Comments so far. Add yours now

Easy make responsive website with media query CSS : 220px screen phone,  iPhone, mini tablet, iPad, 1024 devices, big screen devices.

Selec All Code:
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
/*=Responsiveness CSS : PurpleMAD ---------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------- */  
 
@media only screen and (min-width: 1382px) {
#wrap{ width: 1360px; 
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
}	
}
 
/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 980px) {
 
}	
@media only screen and (min-width: 768px) and (max-width: 959px) {
#wrap{ width: 728px; 
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
}
/*  #Mobile
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#wrap{ width: 450px; 
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
}
 
@media only screen and (min-width: 320px) and (max-width: 479px) {
 
}
 
@media only screen and (min-width: 240px) and (max-width: 319px) {
#wrap{ width: 220px !important;  min-width:220px;}
} 
 
@media only screen and (max-width: 239px) {
#wrap{ width: 220px !important;  min-width:220px;}
}
 
/******************************************************************
PRINT STYLESHEET
******************************************************************/
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
a,  a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after,  a[href^="javascript:"]:after,  a[href^="#"]:after { content: ""; }
pre,  blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr,  img { page-break-inside: avoid; }
img { max-width: 100% !important; }
 @page {
 margin: 0.5cm;
}
p,  h2,  h3 { orphans: 3; widows: 3; }
h2,  h3 { page-break-after: avoid; }
}
/* end of print stylesheet (DO NOT DELETE) */

Leave your comment

You must be logged in to post a comment.

Share IT © 2018. All rights reserved.