1478 sujets

Web Mobile et responsive web design

[Résolu] Affichage responsive des DIV sous mobile

Bonjour , quelqu'un pourrait il me donner un petit coup de main SVP
j'ai un site ici : https://anidelice06.fr/
en haut de page j'ai 4 div qui s'affichent a l'horizontal sur Ordi mais sous mobile elles s'empilent et seulement la dernière est affichée ....

Bref Comment faire en sorte que sous mobile elles s'affichent les unes au-dessous des autres en repoussant le header ...
J'ai essayé pas mal de chose mais aucun bon résultat : en supprimant la position abolute elles basculent toutes mais cachent le logo
Merci pour votre aide
Salut,

bon j'ai regardé vite fait , le problème c'est qu'il est assez bizarre le code html de ton entête Smiley ohwell .
Tu ne pouvais pas regrouper les 4 éléments dans un div juste pour eux ?
La quand je modifie la taille du navigateur, ça fait très bizarre , par moment les 4 éléments semblent disparaître Smiley ohwell

Tu as accès à quoi exactement ? Seulement au css ? Ou aussi au html ?
Je pense que j'aurai tendance à essayer de faire des modifications aussi bien au niveau html que css si c'est possible Smiley ohwell
Bonjour
merci pour le coup de main
J'ai accès a tout .... css et sidebar-header.php (theme Wordpress)
effectivement sous certaines dimension responsive ils ne s'affichent pas


<?php theme_print_sidebar('header-widget-area'); ?>
<div class="shapes">
				<div class="textblock object2059246882">
				<div class="object2059246882-text-container">
				<div class="object2059246882-text"><i class="fa fa-truck fa-lg" aria-hidden="true"></i>&nbsp;Livraison rapide</div>
			</div>
			
		</div><div class="textblock object499253618">
				<div class="object499253618-text-container">
				<div class="object499253618-text"><i class="fa fa-lock fa-lg" aria-hidden="true"></i>&nbsp;Paiement sécurisé</div>
			</div>
			
		</div><div class="textblock object5207059">
				<div class="object5207059-text-container">
				<div class="object5207059-text">Made in France</div>
			</div>
			
		</div><div class="textblock object457306593">
				<div class="object457306593-text-container">
				<div class="object457306593-text"><span class="color:#ffffff"><a href="https://www.facebook.com/anidelice06/" title="Suivez nous Facebook"><i class="fa fa-facebook-f fa-2x" aria-hidden="true"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <a href="https://www.instagram.com/anidelice06/" title="Suivez nous Instagram"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></span></div>
			</div>
			
		</div>
            
		<a href="/panier/" target="_self" title="Mon panier" class="logo logo-814822219">
			<img src="<?php bloginfo('template_url'); ?>/images/logo-814822219.png" alt="" />
		</a>
		<a href="/my-account/" target="_self" title="Mon compte" class="logo logo-1382271747">
			<img src="<?php bloginfo('template_url'); ?>/images/logo-1382271747.png" alt="" />
		</a>
		<a href="https://anidelice06.fr/" target="_self" title="Accueil Anidelice 06" class="logo logo-1388474736">
			<img src="<?php bloginfo('template_url'); ?>/images/logo-1388474736.png" alt="" />
		</a>
		<a href="https://anidelice06.fr/" target="_self" title="Accueil" class="logo logo-376369283">
			<img src="<?php bloginfo('template_url'); ?>/images/logo-376369283.png" alt="" />
		</a>
		<div class="textblock object214903057">
			<?php get_search_form() ?>
		</div>

</div>

Modifié par bretweb (26 Feb 2020 - 15:00)
Ah mais c'est trop cool si tu peux tout changer, tu vas pouvoir faire des bonnes améliorations.

Du coup tu dois pouvoir rajouter un div qui va encadrer tes 4 premiers divs qui contiennent tes elements et lui rajouter une classe pour faire du flexbox : 

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;

Et ensuite pour les 4 autres divs tu dégages tout le bordel de css absolu/margin and co et tu leur met juste : 
flex: auto;


Normalement un truc dans le genre ça devrait le faire (bon après je suis une buse en design donc c'est peut être pas suffisant mais dans les grandes lignes je crois que ça devrait permettre de les mettre les un sous les autres en diminuant la taille de la fenêtre)
re merci pour les infos ... j'avais deja testé une autre façon , actuellement il y a ce code
ça le fait pas trop mal .... a par sous mobile en vertical le logo passe par dessus en horizontal c'est pas le graal mais bon ..... 


<?php theme_print_sidebar('header-widget-area'); ?>


<div style="background:#000000; color:#ffffff; text-align:center; padding-top: 10px;">
      <span class="enttop" ><i class="fa fa-truck fa-lg" aria-hidden="true"></i> Livraison rapide</span> 
	 <span class="enttop"><i class="fa fa-lock fa-lg" aria-hidden="true"></i> Paiement sécurisé </span>  
	 <span class="enttop">Made in France </span> 
 	<a href="https://www.facebook.com/anidelice06/"><span style="color:#ffffff;"><i class="fa fa-facebook-f fa-3x" aria-hidden="true"></i></span> </a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="https://www.instagram.com/anidelice06/"><span style="color:#ffffff;"><i class="fa fa-instagram fa-3x" aria-hidden="true"></i></span></a>  
</div>

			
            
		<a href="/panier/" target="_self" title="Mon panier" class="logo logo-814822219">
			<img src="<?php bloginfo('template_url'); ?>/images/logo-814822219.png" alt="" />
		</a>
		<a href="/my-account/" target="_self" title="Mon compte" class="logo logo-1382271747">
			<img src="<?php bloginfo('template_url'); ?>/images/logo-1382271747.png" alt="" />
		</a>
		<a href="https://anidelice06.fr/" target="_self" title="Accueil Anidelice 06" class="logo logo-1388474736">
			<img src="<?php bloginfo('template_url'); ?>/images/logo-1388474736.png" alt="" />
		</a>
		<a href="https://anidelice06.fr/" target="_self" title="Accueil" class="logo logo-376369283">
			<img src="<?php bloginfo('template_url'); ?>/images/logo-376369283.png" alt="" />
		</a>
		<div class="textblock object214903057">
			<?php get_search_form() ?>
		</div>

<div class="shapes">
</div>
Sujet clos
Aller à