Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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