- The CSS styles declared in this file will be applied when the viewing screen is less than 680 pixels wide.
- Navigation will change to icon menu.
- Image sizes will be the full width of the screen and stacked (no grid).
- Create a new CSS file (File > New > CSS) and add this code to the file:
- Save file as "mobile_styles.css" in the "css" folder.
mobile_styles.css
All CSS defined in the "mobile_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.
@media screen and (max-width: 679px){
/*All this CSS is Different than Desktop CSS*/
/*MAIN FRAMEWORK*/
/*These styles affect the content in the BROWSER WINDOW*/
html, body {
margin-bottom: 80px;
margin-left: 0px;
margin-right: 0px;
}
#frame {
width: 100%;
position:relative;
top: 120px;
left: 0;
z-index:50;
}
/*HEADER*/
/*These styles affect the content in the HEADER*/
header {
width: 100%;
margin-bottom: 40px;
position: fixed;
height: 70px;
top: 0;
left: 0;
padding: 10px;
background: magenta;
z-index: 100;
margin-bottom: 10px;
box-shadow: 2px 2px 5px #888888;
}
#header_logo {
float: left;
padding: 10px;
background-color: purple;
}
#intro {
float: left;
color: #000000;
width: 100%;
font-size: 1.2em;
overflow: visible;
margin-bottom: 0px;
background-color: red;
}
/*MAIN CONTENT*/
#stage {
float: left;
padding-left: 0px;
padding-top:0px;
margin:0px;
width: 100%;
background-color: yellow;
}
#col_1, #col_2, #col_3, #gallery{
width: 100%;
float: left;
}
/*TEXT*/
#col_1, #col_2, #col_3, #gallery p{
width: 100%;
float: left;
padding-left:20px;
}
/*IMAGES*/
#col_1 img, #col_2 img, #col_3 img{
width: 90%;
}
#gallery img{
width: 100%;
height: 100%;
padding-bottom: 10px;
padding-right: 10px;
pointer-events: none;
cursor: default;
}
#footer img{
width: 40px;
height: 40px;
}
header img{
width: 80%;
height:auto;
}
/*FOOTER*/
#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-size: .8em;
box-shadow: 2px -2px 5px #888888;
}
/*NAVIGATION*/
nav{
position: absolute;
right: 30px;
top: 10px;
width: 100%;
}
nav ul, nav:active ul, nav:hover ul{
display: none;
position: absolute;
right: 0px;
top: 30px;
padding: 10px;
background-color: aqua;
width: 30%;
}
nav li {
font-family: 'Roboto', Arial, sans-serif;
font-size: 1em;
height: 40px;
text-decoration:none;
text-align: right;
width: 100%;
padding-right: 10px;
margin: 0;
}
nav li a {
text-decoration:none;
color:black;
padding: 5px;
}
nav li a:hover {
text-decoration:none;
color: white;
background-color: black;
}
nav:hover ul {
display: block;
}
/*Styles affect the NAVIGATION MENU ICON*/
#menu-icon {
display: inline-block;
display: visible;
position: absolute;
right: 0px;
top: 0px;
width: 40px;
height: 40px;
background-color:brown;
background-image: url(../images/menu-icon.png);
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
}
