- The CSS styles declared in this file will be applied when the viewing screen is larger than 1000 pixels wide.
- The preview will change as the visitor changes the browser window (on a desktop computer), as well.
- Create a new CSS file (File > New > CSS) and add this code to the file:
- Save file as "desktop_styles.css" in the "css" folder.
desktop_styles.css
All CSS defined in the "desktop_styles.css" file will affect the preview of the 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 (min-width: 1000px){
/*All this CSS is Different than Mobile CSS*/
/*MAIN FRAMEWORK*/
/*These styles affect the content in the BROWSER WINDOW*/
html, body {
margin-bottom: 80px;
margin-top: 0px;
background-color: grey;
height: 100%;
}
/*These styles affect the content in the main FRAME that contains all the content for the page*/
#frame {
width: 1010px;
height: 100%;
min-height: 100%;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
height: 800px;
padding: 0px;
}
/*HEADER*/
/*These styles affect the content in the HEADER*/
header {
width: 100%;
height: 150px;
background: magenta;
}
#header_logo {
float: left;
padding: 0px;
background-color: mediumpurple;
}
#intro {
width: 90%;
color: #000000;
font-size: 1.2em;
overflow: visible;
margin: 20px;
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{
width: 280px;
float: left;
margin-right: 40px;
padding:0px;
}
#col_3{
width: 280px;
float: left;
padding:0px;
}
/*GALLERY*/
/*These styles affect the content in the GALLERY div tag*/
#gallery{
width: 600px;
float: left;
}
/*IMAGES*/
/*These styles affect the IMAGES in the GALLERY Content*/
#gallery img{
width: 30%;
height: 30%;
cursor: auto;
pointer-events: auto;
}
/*These styles affect the IMAGES in the COLUMN Content*/
#col_1 img, #col_2 img, #col_3 img {
width: 280px; height: 280px;
}
/*These styles affect all the IMAGES in file, unless styled elsewhere*/
img {
max-width: 900px;
max-height: 500px;
}
/*NAVIGATION*/
/*These styles affect the NAVIGATION frame*/
nav{
height: 38px;
width: 1010px;
float:left;
padding: 0px;
background-color: aqua;
}
/*These styles affect the LIST ITEMS in the NAVIGATION*/
nav li {
display:inline-block;
margin-left: 40px;
padding-left: 0px;
float:left;
width: 280px;
}
/*These styles affect the LIST ITEMS that are LINKS in the NAVIGATION*/
nav li a {
font-family: 'Roboto', Arial, sans-serif;
font-size: 1.2em;
color:#FFFDFD;
background-color: #9F9F9F;
text-decoration:none;
padding-bottom: 0px;
margin-bottom:0px;
width: 270px;
padding-left: 5px;
padding-top: 10px;
display:block;
}
/*These styles affect the LIST ITEMS that are LINKS in HOVER STAGE in the NAVIGATION*/
nav li a:hover{
background-color:#373232;
}
/*FOOTER*/
#footer img{
width: 60px;
height: 60px;
}
/*MOBILE NAVIGATION*/
/*This hides the mobile menu image on the desktop*/
#menu-icon {
display: hidden;
}
}
