Conditions et CSS
Résolu
Anthroue
-
Sthalea -
Sthalea -
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.
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.
A voir également:
- Conditions et CSS
- Mise en forme conditionnelle excel plusieurs conditions - Guide
- Votre compte a été désactivé pour violation de nos conditions d’utilisation - Guide
- Google sheet mise en forme conditionnelle 2 conditions ✓ - Forum Bureautique
- Enlever le soulignement d'un lien css - Astuces et Solutions
- Quelles conditions sont nécessaires pour se créer un compte sur un réseau social quand on est âgé de moins de 15 ans ? - Accueil - Guide réseaux sociaux
2 réponses
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
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
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
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