CodePen

HTML

            
              
            
          
!
via HTML Inspector

CSS

            
              @media screen (max-width: 439px){
	#site {
	margin: 2% auto;
	padding-top:15px;
	padding-bottom:15px;
	max-width:220px;}

	#title { font-family: 'modesto-text', serif; font-size: 58em;}
	#menu {font-size:2.5em; line-height:2em;} 
	h2.page-title {font-size:2em;}
}

}
@media screen and (min-width: 440px) and (max-width: 659px){
	#site {
	margin: 2% auto ;
	max-width:440px;
	padding-top:15px;
	padding-bottom:15px;
}
	#title { font-family: 'modesto-text', serif; font-size: 3.2em; padding-top:5px;}
	#menu {font-size:1.3em; line-height:1.3em; padding-top:7px;} 
	h2.page-title {font-size:1.3em;}
}



@media screen and (min-width: 660px) and (max-width: 879px) {
	
body {
		font-size: 1.2em;
			}
	#site {
	margin: 2% auto;
	padding-top:15px;
	padding-bottom:15px;
	max-width:660px;

}

		#title { font-family: 'modesto-text', serif; font-size: 4.8em;}
			#menu {font-size:2em; line-height:2em;} 
			h2.page-title {font-size:1.7em;}

}




@media screen and (min-width: 880px) {
	body {
		font-size: 1.2em;
			}

	#site {
	margin: @% auto ;
	max-width:880px;
	padding-top:15px;
	padding-bottom:15px;
}

	#title { font-family: 'modesto-text', serif; font-size: 5.8em;}
	#menu {font-size:2.5em; line-height:2em;} 
	h2.page-title {font-size:2em;}



}	
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................