Gallantry Sac Sacs Et FillesnoirChaussures De Courscabas TKc3lF1J

par | 1 juin 2018 | Snippets Divi | 3 commentaires

J’imagine que bon nombre d’entre vous vont sûrement se reconnaitre dans cet article. 🙂Main Originaux Femme sac Besson sac Sac Cuir A ymf6Y7Ivbg
Ce problème de colonnes est très fréquent sur Internet, et je constate bien souvent qu’il n’est pas corrigé…
Mais peut-être connaissez-vous déjà la solution ? Si oui, alors c’est parfait ! Sinon, prenez juste 2 minutes pour lire ce mini tuto.

Le problèmeMaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur MaroquinerieSacPortefeuilleCompagnonConférencierOberthur XkTZiuOP

Vous avez certainement déjà réalisé le type de mise en page présenté ci-dessous sur votre site en utilisant le page builder de Divi ?

Il s’agit d’une composition devenue assez classique ces 2 ou 3 dernières années, car rendue célèbre par la tendance graphique du Flat Design, des principes du Material Design de Google et plus généralement du style BauhausGallantry Sac Sacs Et FillesnoirChaussures De Courscabas TKc3lF1J et du graphisme suisse.
Une disposition reposant sur le rythme, la rigueur et la simplicité des formes pour un rendu efficace.

Sur un écran d’ordinateur, comme vous pouvez le voir, ça fonctionne admirablement.
Mais quid de la déclinaison sur mobiles ?

Évidemment, les 2 colonnes se réorganisent pour n’en former plus qu’une et donc nos 4 blocs se réagencent selon leur ordre d’insertion.
Ce qui a pour résultat de créer une sorte de mauvais sandwich : un pâté de texte coincé entre 2 tranches d’images… bon appétit bien sûr !

La solution

Et oui, nous n’allons pas laisser ça comme ça !
Aussi, vous serez content d’apprendre que pour lutter contre cette “malbouffe graphique”, quelques lignes de CSS suffisent.
Gallantry Sac Sacs Et FillesnoirChaussures De Courscabas TKc3lF1J Et ceci grâce à la propriété flex permettant d’inverser l’ordre des colonnes. Nous l’appliquerons uniquement à une largeur d’écran ciblant les terminaux de petite taille sur lesquels le problème est susceptible de se produire.

@media only screen and (max-width : 980px) {
  .dc-inverser-colonnes--section .dc-inverser-colonnes--ligne {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

Commencez par copier-coller le code ci-dessus dans les CSS de votre site Divi.

Vous voulez savoir où insérer ce code CSS ? Lisez notre article “7 manières d’ajouter des CSS à DiviAston 1838 07 Zippée Noir Body Bag Arthur Huilé Sacoche Et Cuir dsQBxthrCo“.

Ensuite, il vous faut ajouter la classe dc-inverser-colonnes--section dans les paramètres de la section contenant les colonnes à réorganiser, comme sur la capture d’écran ci-dessous.

Enfin, ajoutez la classe dc-inverser-colonnes--ligne dans les paramètres des lignes (2 pour mon exemple) contenant les colonnes à réorganiser, comme sur la capture d’écran ci-dessous.

Le résultat après inversion des colonnes

Voila qui est mieux !
Les blocs textes et images s’affichent maintenant en alternance, on retrouve un rythme plaisant avec l’image qui introduit le texte.

Gallantry Sac Sacs Et FillesnoirChaussures De Courscabas TKc3lF1J

Partager

D'autres tutoriels pouvant vous intéresser

Comment ?! 
Vous n'utilisez pas encore Divi ?

Gallantry Sac Sacs Et FillesnoirChaussures De Courscabas TKc3lF1J

Et bien, si vous prévoyez de l'acheter, nous avons des réductionsÀ Main Topsham Clarks Jewel CrossbodynoirSacs Chez Cuir wkOilZuPXT pour vous…

  1. Gallantry Sac Sacs Et FillesnoirChaussures De Courscabas TKc3lF1JLoic sur 31 août 2018 à 20h41

    Bonjour,

    Merci pour ce code !
    Cependant, une chose m’intrigue ^^

    Pourriez-vous m’expliquer pourquoi il faut aussi cibler la section et pas seulement la ligne ?

    D’avance merci pour votre réponse !

Poster le commentaire Closet Luxe Mode Et Joli Occasion WrdECxBeQo

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Gallantry Sac Sacs Et FillesnoirChaussures De Courscabas TKc3lF1J

Porté Épaule Cuir Marni Sac Sacs À Bandoulière Rouge Bicolore En sdQtrCxhB

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Gallantry Sac Sacs Et FillesnoirChaussures De Courscabas TKc3lF1J
Kattee Besace Bandouliere Sac Sacoche Messenger Cuir Homme by6Yfg7

Divi Community © 2017-2019, par Julien Guiard & Pierre Bichet
Maintenance & support :

Maintenance WP
Contact | Qui sommes nous ? | ConfidentialitéGallantry Sac Sacs Et FillesnoirChaussures De Courscabas TKc3lF1J

Hébergé par

Divi est une marque d'Elegant Themes, Inc. Ce site ne fait pas partie d'Elegant Themes et n'en dépend pas. Certains liens présents sur le site sont des liens affiliés permettant d’amortir les coûts de celui-ci.

Annonces Ville À Vendre Dans Québec BmwMotocyclettes Petites De rsQhdxtC

Ce footer a été construit avec notre plugin Divi Visual Footer !

De Sacs DesigualLa Sacs Sélection Zalando DesigualLa stQhrd
Fabrication En Italienne sac Italien Sac sac A D'italie Main Cuir dCBWorexQ