Conditions et CSS Résolu/Fermé

Question

Bonjour, 

Je suis désolée par avance si cette question a déjà été posé, j'ai cherché et je me suis un peu perdue dans la masse de contenus...

Mon problème est le suivant :
Je cherche à afficher une DIV de class "sidebar" avec un certain % de witdh sur mon site sous Wordpress. Jusque la pas de soucis, mais j'aimerai que, quand on rétrécit la page, je voudrai qu'à moins de 320px de width elle disparaisse (ou hidden, je ne sais pas si on peut "supprimer" du code à afficher).

J'ai cherché les conditions avec le css mais j'avoue que le php c'est vraiment pas mon dada... D'ailleurs, si vous avez des sites pour me donner l'envie du php, je suis pas contre ! ;)

Merci à vous pour vos réponses !
PS : C'est pour de l'affichage sur mobile, si ça peut vous aiguiller sur une soluce.

Pitet · Answer

Salut,

Les modifications css en fonction de la résolution de l'écran sont gérées par des medias queries : https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Bonne journée

Sthalea · Answer

Bonjour,

L'utilisation des Media Queries est une bonne solution : il s'agit donc de rajouter en bas de votre feuille CSS (probablement style.css) le code suivant :

/* [Media QUERIES]------------ */

@media screen and (max-width:320px) {
/* on applique les actions suivantes seulement pour les écrans <320px  */
.sidebar : {
  display: none ;
}
}


Bien sûr, d'autres règles CSS seront peut être à ajouter : par exemple pour prévoir que le conteneur principal occupe 100% de la largeur. Voir aussi, si 320px est le bon breakpoint à retenir ... par exemple pour Bootstrap la taille retenue pour les écrans de type "Phones" est si <768px ! 

La meilleure solution est de tester.
Bon courage à vous

Conditions et CSS

2 réponses

Discussions similaires