CSS: Creating "tablet_styles"

    tablet_styles.css

    All CSS defined in the "tablet_styles.css" file will affect the preview of the table (or smaller desktop viewing of this website only).The code will detect what size screen the vistor is viewing the website on and change the styling accordingly.

  1. Create a new CSS file (File > New > CSS) and add this code to the file:
    2. @media screen and (min-width: 680px){
/*All this CSS is Different than Desktop CSS*/
html, body {
margin-bottom: 80px;
margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
#frame {
width: 100%;
margin:0px;
padding: 0px;
}

header {
width: 100%;
margin-bottom:20px;
height: 100px;
background: #fff;
}



#header_logo {
float: left;
padding: 20px;

}

header img{
width: 100%;
height:auto;}

#intro {
float: left;
color: #000000;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
font-size: 1.2em;
overflow: visible;
margin-bottom: 0px;
border-bottom: 5px solid #000000;
}


#stage {
float: left;
padding-left: 0px;
padding-top:0px;
margin:0px;

}


#col_1, #col_2, #col_3 {
width: 240px;
float: left;
padding-left:2%;
}




#gallery{
width: 100%;
float: left;
}


#gallery img {
width: 30%;
height: 30%;
padding:5px;
pointer-events: none;
cursor: default;
}
img {
max-width: 240px;
max-height: 240px;
}
nav{
border-bottom: 5px solid #000000;
	height: 34px;
width: 100%;
float:left;

}

	nav ul{width: 100%;}

nav li {
display:inline-block;
margin: 0px;
padding-left: 5%;
float:left;

}


nav li a {
font-family: 'Roboto', Arial, sans-serif;
font-size: 1em;
color:#FFFDFD;
background-color: #9F9F9F;
text-decoration:none;
padding-left: 12px;
padding-top: 10px;
padding-bottom: 0px;
margin-bottom:0px;
margin-right: 2px;
display:block;
width: 100%;
}

nav li a:hover{
background-color:#373232;
}
#footer {
position: fixed;
text-align:center;
left: 0px;
bottom: 0px;
z-index: 1;
height: 60px;
background-color:#E6E5E5;
width: 100%;
padding: 10px;
float: left;
font-family: Times, "Times New Roman", serif;
font-size: .8em;
box-shadow: 2px -2px 5px #888888;
}
#footer img{
width: 40px;
height: 40px;

}
#menu-icon {
display: hidden;
}
}
    CSS
  2. Save file as "tablet_styles.css" in the "css" folder.