[Résolu] Affichage responsive des DIV sous mobile

Salut,

bon j'ai regardé vite fait , le problème c'est qu'il est assez bizarre le code html de ton entête .
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

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

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)

Bon ok j'ai recalé le logo est maintenant tout fonctionne
Merci