Initial

Question

In this video, when creating new value for media queries, I noticed that many classes are set to initial. What initial value is it set to. I thought that it would set them to the last value set for each particular class but it does not seem to do that
/* Page Styles
================================ */
{
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font: normal 1.1em/1.5 sans-serif;
color: #222;
background-color: #edeff0;
}
/* Layout Element Colors
================================ */
.main-header       { background-color: #384047; }
.main-logo a       { background-color: #5fcf80; }
.main-nav a        { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }
/* Main Layout Styles
================================ */
.main-wrapper {
    width: 90%;
    margin: auto;
}
.main-header {
    padding: 15px;
}
.main-logo,
.main-nav li {
    float: left;
}
.main-logo {
    margin: 0 50px 0 0;
}
.main-nav li {
    margin-top: 15px;
    margin-right: 10px;
    margin-left: 10px;
    list-style: none;
}
.main-logo a, 
.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 5px 15px;
    border-radius: 5px;
}
.main-banner {
    background: #dfe2e4;
    text-align: center;
    padding: 35px 15px;
}
.main-footer {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}
/* Column Layout
================================ */
.col {
    padding: 20px;
    float: left;
    width: 30%;
}
.primary-content {
    width: 40%;
}
.col:last-child {
    float: right;
}
/* Imagery
================================ */
.feat-img {
    width: 50%;
    float: left;
    margin: 5px 15px 5px 0;
    border: solid 5px black;
    padding: 5px;
}
/* Float Clearfix
================================ */
.group:after {
  content: " ";
  display: table;
  clear: both;
}
/* Media Queries
================================ */
@media (max-width: 768px) {
    .main-wrapper,
    .main-nav li, 
    .main-logo,
    .col,
    .feat-img {
        width: initial;
        height: initial;
        float: initial;
    }
   feat-img {
       width: 100%;
   }
    .main-logo {
        margin-right: 0;
    }
    .extra-content {
        display: none;
    }
}

Wayne Priestley · Answer

Initial is the value it has before any styling was added.

Welcome to the Treehouse Community

Looking to learn something new?

pgmd

pgmd

Initial

1 Answer

Wayne Priestley

Wayne Priestley