Identifier et résoudre les problèmes de largeur sur mobile

Lorsque vous activez la version mobile de votre site, certaines pages peuvent contenir des éléments trop larges qui posent problème lors de la visualisation mobile. Voici quelques explications pour identifier ces éléments et résoudre ces problèmes de largeur.

1. Pourquoi cela pose-t-il problème ?
2. Comment identifier les éléments trop larges
3. La largeur de votre design est-elle bien paramétrée ?
4. Une image est trop large
5. Un tableau est trop large
6. Une série de caractères/espaces élargie ma page
7. Mon entête ou mon pieds de page sont trop larges

La largeur de vos pages doit être maîtrisée pour permettre à vos pages de correctement s'adapter à la visualisation sur mobile.
Si la largeur de votre design est mal paramétrée ou si des éléments sont trop larges et élargissent vos pages, la navigation mobile sera compliquée voir impossible pour vos visiteurs.

Pour continuer la lecture de cette documentation, assurez-vous que la version mobile de votre site est bien activée.

Commencez par tester votre page avec l'outil Google Mobile Friendly pour savoir si un ou des éléments sont trop larges.
Si c'est la cas, Google vous affichera l'erreur "Contenu plus large que l’écran".

Il vous faudra ensuite identifier le ou les éléments qui provoquent ce problème. Pour cela ouvrez votre page sur votre smartphone, puis essayez de voir quels sont les éléments qui sont plus larges que les autres et qui pourraient provoquer ce problème.

Vérifiez que la largeur globale de votre design est bien paramétrée et correspond à la réalité. Pour cela, rendez-vous dans la page de paramétrage de votre design (Votre design > Gérer votre design), et contrôlez la valeur que vous avez indiqué pour la largeur de votre design.

Si vous avez identifié une image comme étant responsable de l'élargissement de votre page, pour résoudre le problème vous pouvez appliquer des propriétés responsives sur cette image.

Par exemple, vous allez pouvoir définir que l'image fera 100% de la largeur sur mobile (vous serez alors assuré qu'elle ne fera pas plus de 100% du design).
Forcer la largeur d'une image à 100% sur mobile.

Ou plus radical, vous pouvez choisir que cette image disparaîtra lorsque la page sera visitée sur mobile.
Faire disparaître une image sur mobile.

Le cas le plus fréquent est que votre page soit élargie par un tableau trop large.

Il vous faut alors en premier lieu identifier le pourquoi de cette largeur.

Si vous avez défini une largeur dans les propriétés du tableau, vous allez alors pouvoir appliquer au tableau une class qui lui définira une largeur de 100% lorsqu'il sera visualisé sur mobile.
Comment forcer la largeur d'un tableau à 100% sur mobile

Si vous avez dans votre tableau un contenu qui est à l'origine de cet élargissement, vous pouvez :
-Soit agir sur ce contenu (à ce moment là identifiez le type de contenu -images, textes, etc.- puis référez-vous au paragraphe adéquat dans la présente documentation.
-Soit agir sur la structure du tableau, en transformant ses colonnes en lignes sur mobile (ainsi, le contenu aura plus de largeur et ne devrait plus élargir vos pages.
Comment transformer les colonnes d'un tableau en lignes sur mobile

Et enfin, si tout cela ne fonctionne pas, vous pouvez faire disparaître tout le tableau, ou bien seulement une ou plusieurs cellule lorsque la page est visitée sur mobile.
Faire disparaître un tableau ou une cellule sur mobile

Si vous avez dans votre page des séries de caractères qui ne contiennent aucun espace (par exemple "----------------------..."), cela peut élargir vos pages (c'est également le cas pour des séries d'espaces).

Dans un tel cas, nous vous recommandons de supprimer ces caractères, qui généralement peuvent être remplacés par un autre élément.

Il est possible que votre entête et/ou votre pieds de page ne soit pas adapté à la visualisation sur mobile, et élargissent vos pages.

Dans un tel cas, vous avez la possibilité de les faire disparaître lors de la visualisation sur mobile.

Comment faire disparaître votre entête sur mobile.

Comment faire disparaître votre pieds de page sur mobile.