Erreur Responsive

Malick269
Les bases HTML/CSS
PHP

Salam Anlaikum à tous

Je travaille sur une application web mais je rencontre un probleme que je comprends pas...
Mon responsive fait n'importe quoi je comprends pas pourquoi le browser barre le responsive
voici mon code coté web desktop sa fonctionne normal mais des que je passe en responsive le box servcie ne prend pas les regles du responsive mais du coté web et sa barre le responsive

Code Web

.services__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

Coté responsive


@media only screen and (max-width:430px) {
        .projet__content{
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
  }

Merci de m'aider à comprendre...

3 réponses

SiProdZz

Bonjour, difficile de t'aider sans visuel. Sachant que là tu sembles utiliser deux classes différentes.

Généralement le media responsive est barré car t'as page dépasse surement les 430 px.

  • Essaie dans un premier temps de mettre un nombre plus élevé.

Sinon n'hésite pas à utiliser le Devtools de ton navigateur
exemple sur google chrome:

  • clique droit -> "inspecter"
  • Différentes rubriques sont proposés, choisis le premier (images de deux écrans à droite de élément)

Tu peux gérer les tailles d'écrans. Si ton css ne s'applique pas, n'hésite pas à supprimer le cache (alt+f5 je crois)

popotte

Hello :)

Alors comme dit plus haut sans visuel c'est un peu difficile ^^'

Mais déjà il y a quelques éléments à prendre en compte:

Le navigateur a des styles de base, il faut les virer

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

* {
    box-sizing: border-box; /* très important si tu as des bordures! */
}

Ensuite le desktop-first c'est très casse-gueule comme responsive, utilises plutot le mobile-first:

/* Mobile */
.projet__content{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* desktop */
@media all and (min-width:750px) {
    .services__content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

}

Voila ça c'est des règles de bases, si il y a des problèmes il faudrait un visuel, par exemple le problème vient peut être du fait que tu applique une règle a projectcontent en desktop et servicecontent en mobile, sans html ni visuel on ne peut pas savoir si c'est voulu ou si c'est une erreur (ou une fausse bonne idée :p)

Si c'est pas possible il faudrait que tu nous donnes aussi le code HTML ^^'

dadadou

Super au top !