Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Web Design Re: Responsive Web Design

#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!