Bonjour Tout le monde, 

J'ai besoin de votre aide. Je suis débutant et je suis en train de construire mon site avec le CMS Wordpress.  J'utilise un widget pour saisir en HTML directement et faire trois blocs de texte avec la balise <div>. Or,  je n'arrive pas à mettre ces trois blocs en responsive. 

Sur un écran d'ordinateur, les blocs s'affichent correctement à l'horizontal. 

Quand je vérifie mon site sur responsinator, les blocs s'affichent toujours à l'horizontal : pour voir le problème directement http://www.responsinator.com/?url=zoomjuridique.fr

Comment je dois faire pour mettre mes blocs à la vertical pour la version mobile de mon site.

voici mes codes :

/******
CSS*****/

div {
	display: block;
}

div.wrapper-insurance {
	width: 890px;
	margin: 0 auto 57px;
	padding-bottom: 55px;
	border-bottom: solid 1px rgba(57,57,57,0.2);
}

body.front .panel-region-separator {
	display: none;
}

div.wrapper-insurance {
	width: 990px;
	margin: 0 auto 37px;
	padding-bottom: 55px;
	border-bottom: solid 1px rgba(57,57,57,0.2);
}

div.wrapper-insurance > div {
	width: 250px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	width: 24.5%;
}

div.wrapper-insurance > div > div:not(.insurance-icon) {
	font-family: Arial;
	color: #313131;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	transform: scaleX(1.0001);
	width: 215px;
	margin: auto;
	text-transform: uppercase;
}

div.insurance-icon {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 25px;
	height: 50px;
}

div.pane-el-block-insurance-mobile {
	display: none;
}
/******
Fin CSS***/

/*****
HTML 
*****/

<div class="panel-pane pane-block pane-el-block-insurance" align="center">
  
  <div class="pane-content">
    <div class="el-rich-text-block wrapper-insurance">
    <div>
<div class="insurance-icon"><img src="/sites/all/modules/el_block/img/refund.png" alt=""></div>
<div>community manager juridique freelance pour affirmer la présence de votre cabinet d’avocats, de votre activité juridique sur internet et sur les réseaux sociaux et gagner de nouveaux clients</div>
</div>
<div>
<div class="insurance-icon"><img src="/sites/all/modules/el_block/img/check.png" alt=""></div>
<div>Un chef de projet fonctionnel dans le cadre du déploiement d'un intranet juridique ou d'une GED métier</div>
</div>
<div>
<div class="insurance-icon"><img src="/sites/all/modules/el_block/img/chat.png" alt=""></div>
<div>Réponse gratuite <br>à toutes vos questions sur <br>l'utilisation de nos produits</div>
</div>
</div>  

Merci de votre aide. 

bebert

Bonjour,

c'est normal, tu ne décris pas le comportement sur petits écrans dans ton CSS. Mais je vois que tu utilises Bootstrap, donc tant qu'à faire sers-toi de leur grille Un peu de lecture : https://getbootstrap.com/css/#grid

(et évite les longs textes en capitales, c'est fatigant à lire)

Bonjour, 

je te remercie de ta réponse.  j'ai lu la page et n'étant pas assez calé (je ne suis pas informaticien) je n'ai rien compris.  Est ce qu'il serait possible que l'on me donne le bout de code adaptable à ce que j'ai fait pour pouvoir rendre mon tableau responsive ?

Merci pour ton conseil 

Ce n'est pas un tableau, ce sont trois divs les unes à la suite des autres. C'est pourquoi je te proposais d'utiliser les propriétés de grille de Bootstrap.

En gros, ce qu'il te faudrait :

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      le contenu de ta première div
    </div>
    <div class="col-xs-12 col-md-4">
      le contenu de ta seconde div
    </div>
    <div class="col-xs-12 col-md-4">
      le contenu de ta troisième div
    </div>
  </div>
</div>

Pour info : "col-xs-12" veut dire "sur petits écrans, cet élément prend 12 colonnes (la totalité) de large" ; "col-md-4", "sur moyens écrans et plus grand, cet élément prend 4 colonnes (33%)".

Ainsi tu auras bien tes trois éléments côte à côte sauf sur petits écrans. Si ça ne convient pas, tu peux changer les lettres entre "col" et les nombres : xs, sm, md, lg (très petit, petit, moyen et grand).

Un Grand merci pour ton aide et ta réponse : super sympa.  Je commence à comprendre comment s'articule la programmation autour du responsive. Je n'hésiterai pas à revenir vers vous pour d'autres petites questions :-)

Super, bonne continuation

Magnifique! le code le plus simple et fonctionnel que j'ai pu trouver pour faire passer les éléments d'une ligne les uns en dessous des autres lors de l'affichage sur smartphone.

Et comment faire pour régler la largeur des colonnes ? Car mon texte est tout ecrasé comme s'il était mis dans une boite de pringles

Est ce que vous proposez des prestations légères d'assistance pour fignoler la mise en place d'un site sous prestashop par exemple ? Je serais interessé.

Par exemple je cherche a mettre le menu horizontal en dessous du bottom du header, mais je n'ai rien trouver et je cherche une solution simple sans code a rallonge.

-
Edité par AbcDef39 22 septembre 2018 à 15:05:09

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. Me contacter par MP si besoin.