COMM 223 -
Introduction to Web Site Design and Construction

Creating Responsive Design

Here are the basic code snippets that create "break points" in your CSS. Feel free to copy this into the CSS for your responsive site.

/*Mobile View*/ @media (max-width: 430px) {

 /*Put your mobile CSS here. 
Then erase all this. 
Put your mobile CSS here. 
Then erase all this.
Put your mobile CSS here. 
Then erase all this. 
Put your mobile CSS here. 
Then erase all this.*/ 
}
/*==========Begin Tablet section here================*/ 

/*Tablet View*/ @media (min-width: 431px) and (max-width: 800px) { 

/*Put your tablet CSS here. 
Put your tablet CSS here. 
Then erase all this. 
Put your tablet CSS here. 
Then erase all this. 
Put your tablet CSS here. 
Then erase all this. 
Put your tablet CSS here.*/ 

} 
/*Make sure not to delete this closing brace.
It works with the opening media query for this section*/ 

/*==========Begin desktop section here================*/ 

/*Desktop View*/ @media (min-width: 801px) { 

/*Put your desktop CSS here. 
Then erase all this. 
Put your desktop CSS here. 
Then erase all this.
Put your desktop CSS here. 
Then erase all this. 
Put your desktop CSS here.*/ 

} 
/*Make sure not to delete this closing brace.  
It works with the opening media query for this section*/