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
Bonjour à toute la communauté.
J'ai un souci avec mon site Web je viens ici pour sollicité votre aide.
Malgré que j'ai mis le
body
{ overflow-x:none} ;
Mon site présente toujours une barre de défilement horizontal sur un smartphone .
j'ai même copié ça dans le dans ma feuille de style des @media queries
Mais aucun succès.
Svp quelqu'un peut m'aider à fixer ça ?
Sinon ça m'embrouille un peu...
A voir également:

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é:

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.
0
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
Comme l'a dis Altoro
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
0
Merci pour vos réponses j veux essayer ça...
0
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
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 ?

<meta name="viewport" content="width=device-width, initial-scale=1"/>
0
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.
0