KyFlo/Assets/resp.css

@media screen and (max-width: 600px) {
    
    /*===========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%;
        border: 0.1vw solid black;
        margin: 0;
        padding: 2vw;
        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.raccourci {
        border: none;
    }
    .topnav a#panier{
        width: 20%;
        margin-right: -14%;
    }
    .topnav a#panier:hover{
        margin-right: -14%;
    }
    .topnav a.raccourci:hover,
    a.raccourci:hover {
        padding: 2vw 2vw;
    }
    .topnav a#go {
        width: 5%;
        padding: 1vw;
        font-size: 3vw;
        border: 0.1vw solid rgb(0, 0, 0)
    }
    .topnav a#panier>h3{
        display:none;
    }
    /*===========FLEX CONTAINER===========*/
    .flex-container>div {
        width: 40%;
        margin-left: auto;
        margin-right: auto;
    }
    .flex-container>div>a>img {
        width: 20%;
    }

    .flex-container div:hover img{
        width: 30%;
    }

    .flex-container div.out:hover img{
        width: 20%;
        cursor: not-allowed;;
    }

    #content {
        margin-left: 2vw;
        margin-right: 2vw;
    }

    /*========FOOTER=========*/

    th {
        font-size: 2.5vw;
    }

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

    /*=======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: 2.5vw;
    }

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