Empêcher le scroll horizontal sur son site Web.
Fermé
DestinyKasigwa
Messages postés
1
Date d'inscription
jeudi 5 mars 2020
Statut
Membre
Dernière intervention
6 mars 2020
-
Modifié le 6 mars 2020 à 11:28
Destiny - 13 mars 2020 à 09:52
Destiny - 13 mars 2020 à 09:52
A voir également:
- Supprimer scroll horizontal css
- Supprimer une page word - Guide
- Supprimer compte instagram - Guide
- Supprimer edge - Guide
- Supprimer bing - Guide
- Supprimer compte facebook - Guide
3 réponses
Salut, les media queries c'est fait pour faire plusieurs mises en pages en fonction de critères(comme la taille/résolution de l'écran).
Sans voir votre code dur de dire quoique ce soit, à part un devin mais si on parle de technologie cela n'existe pas...
Je voit toutefois une faute dans le petit morceau de CSS que vous avez indiqué:
Dans le doute le plus simple est de regarder la notice:
https://www.w3schools.com/cssref/css3_pr_overflow-x.asp
Vous verrez facilement ce genre d'erreur(valeur non existante et impossible comme none à l a place de hidden et point virgule mal placé) en utilisant la console de déboguage du navigateur, onglet CSS.
Sans voir votre code dur de dire quoique ce soit, à part un devin mais si on parle de technologie cela n'existe pas...
Je voit toutefois une faute dans le petit morceau de CSS que vous avez indiqué:
body { overflow-x:none} ;/* ceci est faux le point virgule sert à indiquer la fin d'une règle CSS et est OBLIGATOIRE, les accolades contiennent la/les règles CSS pour un ou plusieurs sélecteur(ici la balise body). La valeur none n'existe pas non plus pour la propriété overflow */ /* vous pouvez écrire comme ceci pour masquer la barre de défilement horizontale:*/ body { overflow-x:hidden; }/* avec une bonne indentation c'est p^lus clair et on voit mieux les fautes, en fait l'indentation sert à cela, utilisez là si vous avez des erreurs ou que vous n'êtes pas à l'aise avec la syntaxe du CSS*/
Dans le doute le plus simple est de regarder la notice:
https://www.w3schools.com/cssref/css3_pr_overflow-x.asp
Vous verrez facilement ce genre d'erreur(valeur non existante et impossible comme none à l a place de hidden et point virgule mal placé) en utilisant la console de déboguage du navigateur, onglet CSS.
Bill-Billion
Messages postés
41
Date d'inscription
lundi 23 décembre 2019
Statut
Membre
Dernière intervention
2 septembre 2020
11 mars 2020 à 19:22
11 mars 2020 à 19:22
Comme l'a dis Altoro
verifie si ton bloc s'il y n'ya pas de marge restantes ça peut causer problème en le visualisant sur ton smartphone
Selecteur { overflow-x:hidden; }
verifie si ton bloc s'il y n'ya pas de marge restantes ça peut causer problème en le visualisant sur ton smartphone
declique69
Messages postés
14
Date d'inscription
mardi 17 mai 2016
Statut
Membre
Dernière intervention
4 mai 2020
2
13 mars 2020 à 09:04
13 mars 2020 à 09:04
none n'est pas une valeur reconnue pour overflow-x
Voir http://stylescss.free.fr/v2-properties/overflow.php
Il faut que tu te trouves un site ou un bouquin de référence pour écrire du CSS correct.
Ceci dit, dans ton cas, masquer la barre de défilement n'est pas forcément la bonne solution. Si cette barre apparaît c'est que le contenu est trop large pour l'écran.
As-tu la balise viewport dans la section head du HTML ?
Voir http://stylescss.free.fr/v2-properties/overflow.php
Il faut que tu te trouves un site ou un bouquin de référence pour écrire du CSS correct.
Ceci dit, dans ton cas, masquer la barre de défilement n'est pas forcément la bonne solution. Si cette barre apparaît c'est que le contenu est trop large pour l'écran.
As-tu la balise viewport dans la section head du HTML ?
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Salut et merci pour votre réponse.
En faite le petit bout de code de CSS que j'ai envoyé il y avait bien sûr une erreur de frappe mais crois moi ce pas comme ça qu'il était écrit sur ma feuille de style.
Avant de mettre overflow-x:none ;
J'avais déjà essayé overflow-x:hidden ; et ça n'avait pas marché...
Mais heureusement je trouvé une solution arbitraire..... J'ai juste ajouter cette propriété dans la balise vieuw port et ça marche sauf sur certains navigateurs pas...
<meta name="viewport" content="width-device-width, initial-scale=1 user-scalable=no"/>
J'ai juste ajouté user-scalable=no.
En faite le petit bout de code de CSS que j'ai envoyé il y avait bien sûr une erreur de frappe mais crois moi ce pas comme ça qu'il était écrit sur ma feuille de style.
Avant de mettre overflow-x:none ;
J'avais déjà essayé overflow-x:hidden ; et ça n'avait pas marché...
Mais heureusement je trouvé une solution arbitraire..... J'ai juste ajouter cette propriété dans la balise vieuw port et ça marche sauf sur certains navigateurs pas...
<meta name="viewport" content="width-device-width, initial-scale=1 user-scalable=no"/>
J'ai juste ajouté user-scalable=no.