Discussion :

[chokolatine35]

Bonjour,

J'ai un problème avec mon responsive, le reste est bon sauf les boutons des reseaux sociaux qui bouge lorsque je réduis la page, j'aimerais qu'ils restent bien alignés comme l'image à gauche et en dessous des liens gris . J'y suis depuis assez longtemps, et il me reste juste ce problème pour finir mon site. Si quelqu'un aurait une super astuce Merci beaucoup, très bonne journée.


Mon code :

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
<div class="reseaux">
 
      <div id="facebook">
            <a href="https://www.facebook.com/?fref=ts"><img width="17" height="17" src="<?php echo(get_stylesheet_directory_uri()); ?>/img/fb.png" alt="facebook"/>
            </a>
      </div>
 
       <div id="pinterest">
            <a href="https://fr.pinterest.com/"><img width="17" height="17" src="<?php echo(get_stylesheet_directory_uri()); ?>/img/pint2.png" alt="pinterest"/>
            </a>
      </div>
 
      <div id="instagram">
          <a href="https://www.instagram.com/"><img width="17" height="17" src="<?php echo(get_stylesheet_directory_uri()); ?>/img/insta2.png" alt=""/>
          </a>
      </div>
 
      <div id="mail">
          <a href="mailto:@gmail.fr"><img width="22" height="22" src="<?php echo get_stylesheet_directory_uri(); ?>/img/mail3.png" alt=""/>
          </a>
      </div>
 
 </div>

MON CSS :

Code :

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

1
2
3
4
5
6
.reseaux{
 
margin-left: 75.2%;
margin-top: 2.7%;
font-size: 1.2em;
}

[Invité]

Bonjour,

le code fourni ne permet pas de reproduire l'image montrée, ni de TESTER.

• Pas assez de code CSS
• De plus, il faut le code HTML généré (et pas avec du PHP) -> "Ctrl"+"U"

[grophies]

Est-ce que ce code correspond à ce que tu veux faire ?

Code :

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

1
2
3
4
5
6
7
8
 
.reseaux
{
  display: flex;
  width: 100px;
  margin-left: auto;
  margin-right: 10%;
}

[LearningBoy]

Bonjour chokolatine 35,

Une solution pour gérer ce genre de problème responsive, est de déterminer une largeur minimum pour tes éléments incomprésibles.
Ainsi tes éléments ne seront jamais écrasé grâce à la largeur minimum, et si la page est suffisamment large, alors les éléments seront extensibles :

Code :

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

1
2
3
4
5
 
.resaux {
  /* ... */
  min-width : 100px;
}

Cordialement,

Simon (https://awesome-angular.com)

[chokolatine35]

@LearningBoy

Merci beaucoup !! J'arrive à comprendre lorsque l'on me parle de positionnement en schéma mais lorsque je dois l'appliquer sur le site, il n'y a rien à faire, je n'y arrive pas. Vous avez peut être des tutos ou des livres à me conseiller sur le responsive ? Très bonne journée. Maëva

[chokolatine35]

@grophies

Bonjour,

merci beaucoup !! J'ai juste mis un display : flex et ça fonctionne Est-ce que vous savez, si l'on peut définir un emplacement fixe de chaque élément mais en hauteur ? Par exemple : j'ai une image avec le logo et un trait. Mon menu doit rester fixe sur l'image afin que le trait soit juste en dessous mais bien sûr quand je réduis la page le menu passe en dessous. merci encore pour votre patience

[Mell]

Je mettrais un height fixe sur tes éléments de menu avec un line-height pour qu'ils soient centrés verticalement. Et l'image en background-image du menu en le plaçant correctement avec background-position.
Tu auras sûrement d'autres ajustement à faire, mais sans avoir le code, c'est compliqué de tout prévoir

[LearningBoy]

Bonjour chokolatine 35,

Si vraiment tu bloques, même avec les conseils de Mell, n'hésite pas à poster plus de code pour que nous puissions mieux t'aider, car pour le moment nous ne pouvons que faire des suggestions de propriétés CSS.

[chokolatine35]

@Mell

il n'y a rien a faire snif ^^ j'ai mis plus de code css plus bas. Merci encore pour tout le mal que vous vous donnez