KyFlo/Assets/resp.css

@media screen and (max-width: 700px) {
    
    /*===========GENERAL===========*/
    h1{
        font-size: 3vw;
    }
    body>#bienvenue>h1 {
        font-size: 3vw;
    }
    
    body>#bienvenue>h2 {
        font-size: 2vw;
    }
    button#hautPage{
        display:none;
    }

    /*===========NAVBAR===========*/
    .topnav{
        position: static;
    }
    .topnav input[type=text] {
        float: none;
        display: block;
        text-align: left;
        width: 76.5%;
        margin: 0;
        padding: 2vw;
        border: none;
        transform: none;
        font-size: 3vw;
    }
    .topnav a {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 2vw;
        border: none;
        transform: none;
        font-size: 3vw;

    }
    .topnav a#kyflo{
        font-size: 8vw;
        text-align: center;
    }
    .topnav a#panier,
    a#nous {
        border: none;
    }
    .topnav a#panier{
        width: 20%;
        margin-right: -14%;
    }
    .topnav a#panier:hover{
        margin-right: -14%;
    }
    .topnav a#nous:hover,
    a#contactN:hover {
        padding: 2vw 2vw;
    }
    .topnav a#loupe {
        width: 5%;
        padding: 1vw;
        font-size: 3vw;
        border-left: 0.1vw solid rgb(204, 25, 25)
    }
    .topnav input[type=text] {
        border: 1px solid rgb(190, 73, 73);
    }
    .topnav a#panier>h3{
        display:none;
    }
    /*===========FLEX CONTAINER===========*/
    .flex-container>div {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    .flex-container>div>a>img {
        width: 20%;
        margin-top: 3%;
        margin-left: 10%;
    }
    .flex-container>div>a>h3,
    .flex-container>div>a>h4 {
        margin-left: 50%;
    }
    #content {
        margin-left: 2vw;
        margin-right: 2vw;
    }

    /*========FOOTER=========*/
    tr {
        border-bottom: 0.2vw solid red;
        color: white;
        height: 5vw;
    }

    th {
        font-size: 2.5vw;
    }

    th#line {
        border: none;
    }

    button#contactB {
        margin: auto;
        display: flex;
        justify-content: center;
        padding: 1.5vw 4vw;
        font-size: 2vw;
        color: lightgrey;
        background-color: rgb(27, 27, 27);
        border: 0.1vw solid rgb(204, 25, 25);
        transform: skew(-.312rad);
        margin-bottom: 2vw;
    }

    button#contactB:hover {
        background-color: rgb(204, 25, 25);
        transition-duration: 0.5s;
        border-radius: 1vw;
    }

    td {
        width: 20%;
        font-size: 2vw;
    }

    td#contact {
        width: 100%;
    }

    /*=======FLEX CONTAINER========*/

    .flex-container {
        justify-content: center;
    }

    .flex-container>div {
        width: 80%;
        margin: 1vw;
        line-height: 5vw;
    }

    .flex-container>div>a>h3 {
        font-size: 3vw;
    }

    .flex-container>div>a>h4 {
        font-size: 2.5vw;
    }

    .flex-container>div>a>img {
        width: 20%;
        margin-top: 5%;
    }

    /*=====Produits=======*/
    #Produit>h3 {
        font-size: 2vw;
    }

    #Carac>h2 {
        font-size: 2vw;
        color: lightgrey;
    }

    #Client>div>h1 {
        font-size: 2.8vw;
    }
   
    #Client>div>h3 {
        font-size: 1.5vw;
    }

    input, select {
        font-size: 2.5vw;
    }
    input[placeholder=Commentaire],
    select,
    input[placeholder="Question, suggestion, remarque"],
    select {
    width: 60%;
    padding: 1vw 1vw;
    font-size: 2.5vw;
    }

    input[type=submit],
    select {
    font-size: 2.5vw;
    }

    #Coms>form>h1 {
        font-size: 2.5vw;
    }

    #content>h1 {
        margin-top: 3vw;
        font-size: 3vw;
    }
    
    #content>h2 {
        font-size: 2.5vw;
    }

    #content>ul>li>h3 {
        font-size: 2vw;
    }
    
}