Problème de responsive avec @media screen

Par the_mighty_alfredo, il y a 2 ans

Les bases HTML/CSS

Bonjour , je suis en train de coder le responsive de mon site pour que a partir de 500px de taille de l'écran le .dashboard coulisse vers la gauche voici mon code , je ne sais pas ce qu'il se passe parce que rien ne coulisse

@media screen and (max-width:500px){ body{ width:1100px; } @keyframes responsive{ from { transform :translateX(0px); opacity:1;} to{ transform:translateX(-365px); opacity:0; } } .dashborad{ animation: responsive 2s; } .chrono{ position:absolute; left:570px; } }

Ce que je veux

que le dashboard glisse de la droite vers la gauche

Ce que j'obtiens

rien ne coulisse

6 réponses

popotte, il y a 2 ans

Hello :)

Quand tu dis "à partir de 500px", tu veux dire quand la fenetre est plus grand que 500px ou plus petit?

Si c'est plus grand faut faire min-width

the_mighty_alfredo, il y a 2 ans

non c'est plus petit que 500px , c'est destiné aux écrans de smartphone

popotte, il y a 2 ans

Okay, alors dans ton css la class c'est .dashborad, faute de frappe dans ton code aussi? :)

the_mighty_alfredo, il y a 2 ans

Mon dieu j'avais meme pas remarqué, j'ai modifié le nom comme il faut mais il veut toujours pas coulisser vers la gauche

Soundboy39, il y a 2 ans

Hello,

Essai en mettant la @keyframe en dehors du bloc @media

Lyla Watts, il y a 2 ans

Greetings,

Consider relocating the @keyframe declaration outside the @media block for optimal results. This adjustment can enhance the efficiency and clarity of your code structure.