Home › Forums › CSS › Responsive Web Design › Re: Responsive Web Design
February 13, 2013 at 1:03 am
#124345
rafaelocean
Member
chris thanks that’s working. now i’m trying to figure out why my first media query won’t work.
the background color has remained white.
@media all and (min-width: 320px) and (max-width: 659px) {
body {background-color: #2E1702;
font-family: 'museo-sans', sans-serif;
font-size:10px;
}
#site {
margin: 0 auto;
padding-top:10px;
padding-bottom:15px;
max-width:440px;
width:90%;}
#title { font-family: 'modesto-text', serif; font-size: 3.14em;}
#menu {font-size:1.3em; line-height:2em; padding-top:5px;}
h2.page-title {font-size:1.7em;}
}
@media all and (min-width: 660px) and (max-width: 879px) {
body {
background-color: #2E1702;
color: white;
font-family: 'museo-sans', sans-serif;
font-size:10px;
}
#site {
margin: 0 auto;
padding-top:10px;
padding-bottom:15px;
max-width:660px;
}
#title { font-family: 'modesto-text', serif; font-size: 4.8em;}
#menu {font-size:2em; line-height:2em; padding-top:5px;}
h2.page-title {font-size:1.7em;}
}
@media all and (min-width: 880px) {
body {
background-color: #2E1702;
color: white;
font-family: 'museo-sans', sans-serif;
font-size: 10px;
}
#site {
margin: auto;
max-width:880px;
padding-top:15px;
padding-bottom:15px;
}
#title { font-family: 'modesto-text', serif; font-size: 6.5em;}
#menu {font-size:25px; line-height:2em;}
h2.page-title {font-size:20px;}
.thumbnail {width:220px;}
p { font-size:1.2em; line-height:1.6em;}
}
Check out this Pen!