JS Course Chapter 22 CSS

js_chapter_22_css.css

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

body {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #708090;
    border: 1px solid #000;
    width: 100%;
}

.height100 {
    height: 100px;
}
.purple {
    background-color: purple;
}
.blue {
    background-color: blue;
}
.darkblue {
    background-color: #00008b;
}
.black {
    background-color: #000;
}

nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem;
    width: 100%;
    height: 48px;
    position: fixed;
    top: 0;
    border-bottom: 1px solid #fff;
    z-index: 2;
    background-color: #000;
    color: #fff;
}

section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    z-index: 1;
    padding-top: 48px;
}

/* Depending on the view example (1, 2, or 3), 
you will want to set display:none for the other two 
and display:flex for the example you want to see. */
.view1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    background-color: #d3d3d3;
    color: #000;
}

.view1 div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: #000;
    color: #fff;
    margin: 10px;
}

.view2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none;
    color: #fff;
    max-width: 400px;
    max-height: 60%;
    padding-top: 0;
}

.view2 div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 200px;
    height: 200px;
    color: #fff;
    margin: 10px;
}

.view3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none;
    background-color: #d3d3d3;
    border: 1px solid #000;
    max-width: 400px;
    padding: 2rem;
}

.view3 form label {
    color: #000;
    margin-right: 1rem;
    font-size: 1.5rem;
}

.view3 form input {
    width: 100%;
    line-height: 1.5rem;
    font-size: 1.5rem;
}

.view3 form button {
    display: block;
    margin-top: 1rem;
    margin-left: auto;
    font-size: 1.25rem;
    padding: 0.75rem;
    border-radius: 10px;
} 

Thanks again :)

Thank you

.view2 and .view3 both have display: twice and the 2nd one is causing issues when one tries to set display: to flex to view it (given the rules of cascading styles).

Hi Dave, I have been following your JS training but faced a problem in Chapter 22. Your comment in the CSS file which reads "Depending on the view example (1, 2, or 3), you will want to set display: none for the other two and display: flex for the example you want to see." is not completely clear to me. I followed your instruction (the way I understood which might be wrong...) but cannot see the grey margin around the dark blue box as you have shown in the YouTube training.

Could you please have a look at your CSS and HTML files associated with the view you work on in Chapter 22 of the training and share those two files. Thanks.

Finded a solution .view2 and .view3 have 2 display to make view 2 visible add line at last of the .view1 class as display:none which overides the display:flex at starting then remove display:none at second last line or third line of .view2 class this will make .view2 visible and for further .view3 class remove display at last of .view3 class and add display:none to .view2 and .view1 classes. Done✅✅

@jsc0ded - Thanks Adam. Just noticed what you had mentioned. Removed extra $display: none;$ from $.view2$ and $.view3$ which resolved the matter!

You used view as a class in your code, and we’re using view1, view2 , view3. Why?

I’m having a little issue here