WCS Quest "07 - CSS : responsive web design" | style.css

 /* NAVIGATION FORMATTING */
 nav {
        background-color: black ;
        color: grey ;
        margin-bottom: 0px;
        padding-top: .5em;
        padding-bottom: .5em;
    }
 nav li {
        display: inline ;
        font-size: 18px ;
        padding: 10px ;
 }
 nav li:first-child {
        font-size: 30px ;
        font-weight: bold;
        margin-left: -30px
 }
 nav li:nth-child(2) {
        background-color: #C8C8C8 ;
        padding-top: 2em;
        padding-bottom: 1.5em;
 }
 #first_pic {
        background-color: #E6E6E6 ;
        height: 300px;
        margin-top: 0px ;
}


 /* ARTICLES FORMATTING */
 h2>p {                  /* text between parenthesis */
        display: inline;
        font-size: smaller;
        font-weight: normal;
 }
 h2 {
        font-size: 30px;
 }
 #fellows {
        text-align: center;
 }
 .articles {
        padding: 10px;
        text-align: center;
        color: #E6E6E6 ;
        margin-bottom: 5em;
 }
 /* section ul {
      display: flex;     /* Flexbox is forbidden for this quest.
    } */
 article {
        display: inline-block;
        background-color: #E6E6E6 ;
        padding: 15px ;
        margin: 5px ;
        width: 25em;
        height: 30em;
 }

 /* FORM FORMATTING */
form ul {
        list-style-type: none;
        text-align: center;
}
form ul li {
        padding: 5px;
}
input {
        size: 200px;
        width: 85%;
}
select {
        width: 85%;
}
textarea {
    width: 85% ;
}


/* DESKTOP STYLES */
@media only screen and (min-width: 961px) {

    /* Nothing to add here in fact. */

} /*END DESKTOP STYLES*/




/* MOBILE STYLES */
@media only screen and (max-width: 961px) {

    #first_pic {            /* Grey blocs removal. */
        display: none ;
    }

    .articles {
        display: none ;
    }

    article {
        display: none ;
    }

    section ul {
        display: none;
    }

    .carousel {
        display: none ;
    }
    form h2 {           /* Contact us" title centering. */
        text-align: center ;
    }

    h2>p {                  /* Text between parenthesis increase. */
            font-size: 35px;
    }
    h2 {            /* Title 1 size increase. */
            font-size: 40px;
    }

 }  /* END MOBILE STYLE