Scroll-barre horizontale s'affiche sur smartphone et tablette

Invité · 28/04/2019, 20h38

Bonjour,

Je suis entrain de réaliser un site à l'aide de wordpress. Le template est responsive. Par contre, j'ai un petit soucis. Lorsque je réduis la fenêtre pour voir le template tablette ou smartphone ou que je regarde le site depuis mon tél. portable, le width des pages est doublé (on voit un scroll qui s'affiche en bas de page et il est possible de scroller vers la droite alors qu'il n'y a aucun contenu). Photo ci-dessous ! J'ai essayé de voir dans le CSS mais je ne trouve rien. Si jamais le site est le suivant: http://www.datweb.ch
Nom : pb_datweb.jpg
Affichages : 1182
Taille : 70,7 Ko

Nom : pb_datweb.jpg
Affichages : 1182
Taille : 70,7 Ko

Auriez-vous une solution pour résoudre ce problème ?

Meilleures salutations

**tataye54** · 29/04/2019, 11h21

c'est ton .menu-inside-wrapper qui est en position absolute qui est le problème

Invité · 29/04/2019, 13h03

Merci pour ta réponse rapide. J'avais effectivement essayé de bidouiller de ce côté là, mais lorsque je le mets en position:relative la page s'adapte effectivement. Par contre le menu ne prend plus toute la largeur de l'écran comme auparavant.

Je ne sais vraiment pas où et comment modifier cela sans que tout le reste du site ne soit modifié.

Quels codes dois-je changer et dans quelles classes ?

Merci d'avance

Kévin

**NoSmoking** · 30/04/2019, 09h45

Bonjour,
c'est effectivement ton élément .menu-inside-wrapper qui est cause de ton soucis mais pas parce qu'il est positionné en absolute, quoique !!!, mais parce qu'il est affiché/masqué via la propriété visible et décalé vers la droite.

La propriété visible cache/montre l'élément mais sans le retirer du flux, sa place est donc toujours « occupée » dans le document d'où l'apparition de la scrollbar lorsque celui-ci est en position right:-100%.

Pour régler ce problème tu as plusieurs solutions comme utiliser display:none/block en lieu et place de visiblility:hidden/visible, jouer avec l'opacity:0/1 ou encore en faisant varier sa largeur de 0 à 100% en ajoutant un overflow:hidden.

Tu n'as que l'embarras du choix, mais nul doute que tu vas trouver ce qui te convient le mieux et ce attendu que le titre de ton site est « Création et hébergement de sites internet »

Invité · 03/05/2019, 22h55

Hello merci pour ta réponse,

J'ai essayé plusieurs choses et rien ne fonctionne vraiment. Par exemple, j'ai essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 .menu-inside-wrapper:before{
display:none;
}

(afin que le menu ne s'affiche pas avant que le menu ne soit activé)
Cela ne fonctionne pas.

J'ai suivi tes conseils et tenté avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 .menu-inside-wrapper {
Overflow:hidden;
Width:100%;
}

Mais ça ne change rien du tout non plus.

Je me suis ensuite résigné à utiliser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.menu-inside-wrapper {
		right: 0%;
	}

Ce qui fait que le menu n'est plus à droite, mais lorsque je l'ouvre, il s'affiche sans être balayé depuis la droite (logique) et lorsque je le referme, il reste affiché 1 seconde avant de se rendre invisible.
Est-il possible de garder cette ouverture du menu par la droite, mais qu'il ne soit pas présent sur l'écran même caché lorsqu'il est fermé ?
Ou sinon qu'il s'affiche sans être balayé mais qu'il se ferme immédiatement ?

Merci votre aide est précieuse et permet de comprendre davantage !

Salutations

Kévin

**NoSmoking** · 04/05/2019, 10h12

Je ne saurais te dire ce qui n'a pas fonctionné dans tes essais mais visiblement tu n'as pas fait ce qu'il fallait

Voici un petit exemple simple, juste pour la gestion de l'effet, de ce que cela pourrait être

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1967401">
<title>[CSS] Ouverture par la droite</title>
<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 1em/1.5 Verdana,Arial,sans-serif;
}
body {
  box-sizing: border-box;
  border: 1px solid transparent;
}
.menu {
  position: relative;
  text-align: right;
  padding-bottom: .5em;
}
.menu nav {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  Width: 0;
  overflow: hidden;
  text-align: center;
  line-height: 2em;
  white-space: nowrap;
  background: #FFF;
  box-shadow: 0 0 2px #000 inset;
  transition: .5s all;
  transform: translate3d(0,0,0);
}
.menu nav a {
  display: block;
}
#hide-show-menu {
  position: absolute;
  left: -9999em;
}
#hide-show-menu ~ label {
  display: inline-block;
  margin: 0 1em;
  padding: .5em;
  border: 1px solid #CCC;
  cursor: pointer;
}
#hide-show-menu:checked ~ nav {
  width: 100%;
}
 
@media(min-width:640px) {
  .menu nav {
    display: inline-block;
    top: 0;
    left: 0;
    width: 10em;
    transition: none;
  }
  #hide-show-menu:checked ~ nav {
    width: 10em;
  }
  #hide-show-menu ~ label {
    display: none;
  }
}
</style>
</head>
<body>
<main>
  <header>
    <h1>Ouverture menu par la droite</h1>
  </header>
  <section class="menu">
    <input id="hide-show-menu" type="checkbox">
    <label for="hide-show-menu">Show menu</label>
    <nav>
      <a href="http://xhtml.developpez.com/cours/">Cours (X)HTML</a>
      <a href="http://css.developpez.com/cours/">Cours CSS</a>
      <a href="http://javascript.developpez.com/cours/">Cours JS</a>
    </nav>
  </section>
</main>
</body>
</html>

Je te laisse regarder en détail les différents points !

Scroll-barre horizontale s'affiche sur smartphone et tablette

CSS

Discussions similaires

Partager

Partager