Forum : Media Querry "!important"

Gamper

Hello :)

Utilises-tu un framework (type Bootstrap ou autre) en plus de tes propriétés CSS persos ?

jlspam

Auteur

Hello ! Merci pour ta réponse.

Non, je n'ai pas encore installé bootstrap ! =/ Mais j'utilise SASS.

Gamper

il me faudrait voir ton code si possible :) Là comme ça je sais pas trop je dirai que tu as des conflits dans tes propritétés CSS ce qui te force à utliser !important pour prendre le dessus...

jlspam

Auteur

Voila mon code, c'est juste une topbar,

Merci à toi pour ton aide

HTML :

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="style/style.css" type="text/css">
    <link rel="shortcut icon" href="img/logo1.png" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Delius+Unicase:wght@700&display=swap" rel="stylesheet"> <title>Réseau Social</title>
</head>
<body>
    <header class="topbar">
        <div class="topbar-left">
            <a class="topbar-logo" href="#"><img src="/img/logo1.png" width="50" alt="Logo du site"></a>
            <a class="topbar-marque" href="#">BlaBla Social</a>
        </div>
        <div class="topbar-centre">
            <input type="text" name="search" id="" placeholder="rechercher ici">
            <button type="submit">OK</button>
        </div>
        <nav class="topbar-right">
            <a href="#" class="active">Accueil</a>
            <a href="#">Historique</a>
            <a href="#">Évènements</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <footer>
        <div class="conteneur-flex">
            <div class="element-flex">1</div>
            <div class="element-flex">2</div>
            <div class="element-flex">3</div>
        </div>
    </footer>
</body>

</html>

SCSS :

.topbar {

display: flex;
position: relative;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
background-image: linear-gradient(45deg, rgba(252, 175, 9, .9)55%, rgba(252, 175, 9, 0.4), rgba(252, 175, 9, .6));
box-shadow: -1px 4px 13px 1px rgba(0, 0, 0, 0.2);

}

.topbar-left {

display: flex;
flex-flow: row wrap;
// justify-content: space-between;
align-items: center;

.topbar-logo {

    margin-left: 50px;
    margin-top: 2px;
}

.topbar-marque {
    font-family: 'Delius Unicase', cursive;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: 2px;
    color: $main-color-orange-hover;

}

}

.topbar-centre {

input {
    font-family: inherit;
    padding: 3px;
    width: 300px;
    font-size: 17px;
    text-align: center;
    border: 2px ridge #cccccc;
    border-radius: 10px;
    box-shadow: inset 0px 0px 2px 0px rgba(42, 42, 42, .75);
}

&:focus {
    outline: none;
}

button {

    box-shadow: inset 0px 0px 2px 0px rgba(42, 42, 42, .75);
    background: linear-gradient(to bottom, #ffffff 5%, #fcfcfc 100%);
    background-color: #ffffff;
    border-radius: 10px;
    border: 2px ridge #cccccc;
    display: inline-block;
    cursor: pointer;
    color: $main-color-orange-darken;
    font-size: 15px;
    font-weight: 600;
    padding: 4px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff;
    font-family: inherit;
    transform: translateY(-1px);

    &:hover {
        background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
        background-color: #e9e9e9;
        color: $main-color-orange-hover;
    }

    &:active {
        position: relative;
        top: 1px;
    }
}

}

.topbar-right {

margin-right: 30px;
color: $main-color-orange-darken;

a {
    padding: 18px 15px;
    text-decoration: none;
    color: inherit;
    font-size: 17px;

    &:hover {

        color: $main-color-orange-hover;
        background-color: $main-color-orange-lighten;
        border-radius: 2px;
    }
}

}

MEDIA QUERRY :

@media screen and (max-width: 1102px) {

.topbar {
    display: block !important;
    text-align: center;
}

.topbar-left {

    .topbar-logo {
        width: 100%;
        margin: 0 auto;
    }

    .topbar-marque {
        width: 100%;
        margin: 0 auto;
        transform: translateX(22px);
        padding-bottom: 10px;
    }
}

.topbar-centre {

    padding: 5px 0 5px 0;

    input {
        margin: 0 auto !important;
        width: 50 !important;
    }

    button {
        display: none !important;
    }
}

.topbar-right {
    margin: 0 auto;
    width: 100%;
    padding: 10px 0 15px 0;

    a {
        padding: 15px 10px !important;
        border-radius: 2px !important;
    }
}

}

SiProdZz

Bonjour.
Le meilleur moyen de pallier à ton problème et d'améliorer ton code est tout simplement de commencer ton css version mobile.
Tu fais ton css en te basant sur un petit écran
Et au lieu d'utiliser les média query max, tu utilises, les média querry min

Et je suis d'accord avec Gamper, le top c'est de ne pas "overwrite" une règle css, qui te force à utiliser le "!important"

Media Querry "!important"

5 réponses