Original media queries for my website, www.theo-nicolaou.co.uk
@media screen and (min-width: 320px) and (max-width: 479px) { | |
#wrapper { | |
width: 93.8%; | |
border: none; | |
text-align: center; | |
margin: 5px; | |
/*background-color: #ff0066;*/ | |
} | |
#wrapper header nav li { | |
margin: 0px; | |
} | |
nav#breadcrumb { | |
display: none; | |
} | |
article hgroup h1, article hgroup h2, article hgroup h3 { | |
width: 60.634146%; | |
margin-left: 0%; /*was 95px: 95 / 815 */ | |
} | |
article .floatleft { | |
float: right; | |
} | |
.projectlistitem-CAP, .projectlistitem-SS, .projectlistitem-BPS, .projectlistitem-SP, .projectlistitem-PL, .projectlistitem-DR, .projectlistitem-CBF, .projectlistitem-UKC, .projectlistitem-TDG { | |
background-image: none; | |
} | |
aside { | |
display: block; | |
float: none; | |
width: 100%; | |
} | |
aside img { | |
max-width: 100%; | |
} | |
article { | |
width: 100%; | |
} | |
aside .portfolio { | |
display: none; | |
} | |
video { | |
max-width: 100%; | |
} | |
input, textarea { | |
width: 63.444444%; | |
} | |
.form li { | |
width: 83.853659%; | |
} | |
}/*/mediaquery*/ | |
@media screen and (min-width: 480px) and (max-width: 767px) { | |
#wrapper { | |
width: 93.8%; | |
border: none; | |
text-align: center; | |
margin: 5px; | |
/*background-color: #cccccc;*/ | |
} | |
#wrapper header nav li { | |
margin: 0px; | |
} | |
nav#breadcrumb { | |
display: none; | |
} | |
article hgroup h1, article hgroup h2, article hgroup h3 { | |
width: 80.634146%; | |
margin-left: 0%; /*was 95px: 95 / 815 */ | |
} | |
article .floatleft { | |
float: right; | |
} | |
.projectlistitem-CAP, .projectlistitem-SS, .projectlistitem-BPS, .projectlistitem-SP, .projectlistitem-PL, .projectlistitem-DR, .projectlistitem-CBF, .projectlistitem-UKC, .projectlistitem-TDG { | |
background-image: none; | |
} | |
aside { | |
float: none; | |
width: 100%; | |
} | |
aside img { | |
max-width: 100%; | |
} | |
article { | |
width: 100%; | |
} | |
aside .portfolio { | |
display: none; | |
} | |
video { | |
max-width: 100%; | |
} | |
input, textarea { | |
width: 55.444444%; | |
} | |
.form li { | |
width: 78.853659%; | |
} | |
}/*/mediaquery*/ | |
/*media screen and (min-width: 600px) and (max-width:767px) { | |
#wrapper { | |
width: 93.8%; | |
border: none; | |
text-align: center; | |
margin: 5px; | |
} | |
#wrapper header nav li { | |
margin: 0px; | |
} | |
nav#breadcrumb { | |
display: block; | |
} | |
article hgroup h1, article hgroup h2, article hgroup h3 { | |
width: 57.634146%; | |
margin-left: 13.9%; | |
} | |
}*/ | |
@media screen and (min-width: 768px) and (max-width: 905px) { | |
#wrapper { | |
width: 93.8%; | |
text-align: center; | |
margin: 0px auto; | |
} | |
#wrapper header nav li { | |
margin: 0px; | |
} | |
nav#breadcrumb { | |
display: block; | |
} | |
article .floatleft { | |
margin-right: 1%; | |
} | |
article hgroup h1, article hgroup h2, article hgroup h3 { | |
width: 63%; | |
margin-left: 12.5%; | |
} | |
aside img { | |
max-width: 100%; | |
} | |
.portfolio li { | |
margin-right: 2.5%; | |
} | |
input, textarea { | |
width: 43.444444%; | |
} | |
.form li { | |
width: 68.853659%; | |
} | |
}/*/mediaquery*/ | |
@media screen and (min-width: 906px) and (max-width: 1105px) { | |
#wrapper { | |
width: 76.8%;/*56.8%;*/ | |
text-align: center; | |
margin: 5px auto; | |
/*background-color: #006600;*/ | |
} | |
#wrapper header nav li { | |
margin: 0px; | |
} | |
nav#breadcrumb { | |
display: block; | |
} | |
article .floatleft { | |
margin-right: 1%; | |
} | |
article hgroup h1, article hgroup h2, article hgroup h3 { | |
width: 63%; | |
margin-left: 12.5%; | |
} | |
aside img { | |
max-width: 100%; | |
} | |
.portfolio li { | |
margin-right: 2.5%; | |
} | |
input, textarea { | |
width: 45.444444%; | |
} | |
.form li { | |
width: 70.853659%; | |
} | |
}/*/mediaquery*/ | |
@media screen and (min-width: 1106px) { | |
#wrapper { | |
width: 76.8%; | |
text-align: center; | |
margin: 5px auto; | |
} | |
}/*/mediaquery*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment