{"id":27937,"date":"2026-01-28T09:57:38","date_gmt":"2026-01-28T07:57:38","guid":{"rendered":"https:\/\/aivie.ch\/faq\/pourquoi-plusieurs-images-saffichent-elles-les-unes-en-dessous-des-autres-ou-trop-larges-sur-mobile\/"},"modified":"2026-01-29T13:56:51","modified_gmt":"2026-01-29T11:56:51","slug":"pourquoi-plusieurs-images-saffichent-elles-les-unes-en-dessous-des-autres-ou-trop-larges-sur-mobile","status":"publish","type":"faq","link":"https:\/\/aivie.ch\/fr\/faq\/pourquoi-plusieurs-images-saffichent-elles-les-unes-en-dessous-des-autres-ou-trop-larges-sur-mobile\/","title":{"rendered":"Pourquoi plusieurs images s&rsquo;affichent-elles les unes en dessous des autres ou trop larges sur mobile&nbsp;?"},"content":{"rendered":"\n<p>J\u2019ai plac\u00e9 plusieurs images (par exemple, 3\u00a0logos de marque ou de produit) c\u00f4te \u00e0 c\u00f4te dans un e-mail.<br\/>La mise en page est correcte sur l\u2019ordinateur, mais sur le smartphone, les images s\u2019affichent <strong>les unes en dessous des autres<\/strong> ou les colonnes sont <strong>tr\u00e8s larges<\/strong>, bien que les images elles-m\u00eames soient petites. Quelle en est la raison et comment puis-je contr\u00f4ler cela\u00a0? Il est important de comprendre les d\u00e9fis li\u00e9s \u00e0 l\u2019utilisation de plusieurs images sur mobile.  <\/p>\n\n<!--more-->\n\n<p>Plusieurs images ne s\u2019affichent souvent pas de mani\u00e8re optimale sur mobile. Ce comportement correspond au <strong>comportement r\u00e9actif standard de MJML<\/strong>, car MJML est con\u00e7u pour le mobile\u00a0:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Les colonnes (<code>mj-column<\/code>) sont <strong>empil\u00e9es sur 100\u00a0% de la largeur<\/strong> par d\u00e9faut sur mobile<\/li>\n\n\n\n<li>Cela cr\u00e9e des colonnes individuelles tr\u00e8s larges<\/li>\n\n\n\n<li>Si, en m\u00eame temps, l&rsquo;option \u00ab\u00a0Fluid on mobile\u00a0\u00bb est r\u00e9gl\u00e9e sur \u00ab\u00a0Oui\u00a0\u00bb, l&rsquo;image s&rsquo;affiche sur toute la largeur<\/li>\n<\/ul>\n\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-298ca11\" data-block-id=\"298ca11\"><style>.stk-298ca11 .stk-img-wrapper{width:600px !important;}<\/style><figure><span class=\"stk-img-wrapper stk-image--shape-stretch stk--has-lightbox\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-27932\" src=\"https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28095226\/Fluid-on-Mobile-im-Aivie-E-Mail-Builder-1920x1058.png\" width=\"1920\" height=\"1058\" alt=\"\" title=\"\" srcset=\"https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28095226\/Fluid-on-Mobile-im-Aivie-E-Mail-Builder-1920x1058.png 1920w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28095226\/Fluid-on-Mobile-im-Aivie-E-Mail-Builder-960x529.png 960w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28095226\/Fluid-on-Mobile-im-Aivie-E-Mail-Builder-768x423.png 768w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28095226\/Fluid-on-Mobile-im-Aivie-E-Mail-Builder-1200x661.png 1200w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28095226\/Fluid-on-Mobile-im-Aivie-E-Mail-Builder-480x265.png 480w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/span><\/figure><\/div>\n\n<h3 class=\"wp-block-heading\">Ce que fait \u00ab\u00a0Fluid on Mobile\u00a0\u00bb \u2013 et ce qu&rsquo;il ne fait pas<\/h3>\n\n<p><strong>Fluid on Mobile = No<\/strong> signifie\u00a0:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>L&rsquo;image n&rsquo;est <strong>pas automatiquement mise \u00e0 l&rsquo;\u00e9chelle sur toute la largeur<\/strong> sur mobile<\/li>\n\n\n\n<li>La largeur d&rsquo;image d\u00e9finie (par exemple, <code>120px<\/code>) est conserv\u00e9e <\/li>\n<\/ul>\n\n<p><strong>Mais\u00a0:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>La colonne environnante reste \u00e0 100\u00a0% de la largeur<\/li>\n\n\n\n<li>La mise en page (c\u00f4te \u00e0 c\u00f4te ou les uns en dessous des autres) n&rsquo;est <strong>pas affect\u00e9e<\/strong> par cela<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Solution\u00a0: utiliser <code>mj-group<\/code> pour les colonnes fixes sur mobile<\/h3>\n\n<p>Pour que plusieurs images restent <strong>c\u00f4te \u00e0 c\u00f4te<\/strong> sur mobile, les colonnes doivent \u00eatre regroup\u00e9es logiquement.<\/p>\n\n<p>Pour ce faire, un <strong><code>mj-group<\/code><\/strong> est utilis\u00e9 dans MJML\u00a0:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>mj-group<\/code> emp\u00eache l&#8217;empilement automatique des colonnes<\/li>\n\n\n\n<li>Les largeurs de colonne en pourcentage (<code>33.33 %<\/code>, <code>50 %<\/code>) sont conserv\u00e9es<\/li>\n\n\n\n<li>Les colonnes \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un groupe doivent imp\u00e9rativement avoir une largeur en pourcentage (pas en pixels)<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Comment afficher plusieurs images c\u00f4te \u00e0 c\u00f4te dans Aivie<\/h3>\n\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-e2f7d3b\" data-block-id=\"e2f7d3b\"><style>.stk-e2f7d3b .stk-img-wrapper{width:600px !important;}<\/style><figure><span class=\"stk-img-wrapper stk-image--shape-stretch stk--has-lightbox\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-28065\" src=\"https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/29123102\/bilder-mobile-eine-reihe-pattern-aivie-email-builder-scaled.png\" width=\"2560\" height=\"1578\" alt=\"Images sur mobile en ligne. Un mod&#xE8;le dans l&#039;Aivie Email Builder \" title=\"\" srcset=\"https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/29123102\/bilder-mobile-eine-reihe-pattern-aivie-email-builder-scaled.png 2560w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/29123102\/bilder-mobile-eine-reihe-pattern-aivie-email-builder-960x592.png 960w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/29123102\/bilder-mobile-eine-reihe-pattern-aivie-email-builder-1920x1184.png 1920w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/29123102\/bilder-mobile-eine-reihe-pattern-aivie-email-builder-768x473.png 768w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/29123102\/bilder-mobile-eine-reihe-pattern-aivie-email-builder-1200x740.png 1200w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/29123102\/bilder-mobile-eine-reihe-pattern-aivie-email-builder-480x296.png 480w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/span><\/figure><\/div>\n\n<ol class=\"wp-block-list\">\n<li>Ouvrez l&rsquo;Aivie E-mail-Builder<\/li>\n\n\n\n<li>S\u00e9lectionnez le bloc \u00ab\u00a0S\u00e9rie d&rsquo;images\u00a0\u00bb sur le c\u00f4t\u00e9 gauche<\/li>\n\n\n\n<li>S\u00e9lectionnez l&rsquo;image appropri\u00e9e en double-cliquant dessus<\/li>\n\n\n\n<li>Ajoutez d&rsquo;autres images comme bloc si n\u00e9cessaire, ou supprimez les images inutiles<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\">Avanc\u00e9\u00a0: Afficher plusieurs images c\u00f4te \u00e0 c\u00f4te via le code<\/h3>\n\n<p>Vous pouvez \u00e9galement r\u00e9soudre ce probl\u00e8me via le code. Voici un exemple de code pour une mise en page avec trois images\u00a0: <\/p>\n\n<pre class=\"wp-block-code\"><code>\n  &lt;mj-group&gt;\n    &lt;mj-column&gt;\n      &lt;mj-image width=\"160px\" height=\"80px\" src=\"https:\/\/...\"&gt;&lt;\/mj-image&gt;\n    &lt;\/mj-column&gt;\n    &lt;mj-column&gt;\n      &lt;mj-image width=\"160px\" height=\"80px\" src=\"https:\/\/...\"&gt;&lt;\/mj-image&gt;\n    &lt;\/mj-column&gt;\n    &lt;mj-column&gt;\n      &lt;mj-image width=\"160px\" height=\"80px\" src=\"https:\/\/...\"&gt;&lt;\/mj-image&gt;\n    &lt;\/mj-column&gt;\n  &lt;\/mj-group&gt;<\/code><\/pre>\n\n<h3 class=\"wp-block-heading\">Quand regrouper vos images<\/h3>\n\n<p>Utiliser <code>mj-group<\/code> toujours lorsque\u00a0:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Les logos, les marques ou les produits sont visuellement li\u00e9s<\/li>\n\n\n\n<li>Les \u00e9l\u00e9ments doivent rester c\u00f4te \u00e0 c\u00f4te sur mobile<\/li>\n<\/ul>\n\n<p>Cela permet de contr\u00f4ler pr\u00e9cis\u00e9ment les mises en page d&rsquo;e-mails.<\/p>\n\n<p>Si vous souhaitez contr\u00f4ler davantage la fa\u00e7on dont vos e-mails s&rsquo;affichent sur mobile, cet article pourrait vous int\u00e9resser\u00a0: <a href=\"https:\/\/aivie.ch\/it\/faq\/come-posso-visualizzare-immagini-o-pulsanti-solo-su-desktop-o-solo-su-mobile\/\" data-type=\"faq\" data-id=\"27941\">Comment afficher des images ou des boutons uniquement sur ordinateur ou uniquement sur mobile\u00a0?<\/a> <\/p>\n\n<p>Pour en savoir plus sur l&rsquo;\u00e9criture de code avec <code>mj-group<\/code>, consultez la <a href=\"https:\/\/documentation.mjml.io\/#mj-group\" data-type=\"link\" data-id=\"https:\/\/documentation.mjml.io\/#mj-group\" target=\"_blank\" rel=\"noopener\">documentation MJML<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>J\u2019ai plac\u00e9 plusieurs images (par exemple, 3\u00a0logos de marque ou de produit) c\u00f4te \u00e0 c\u00f4te dans un e-mail.La mise en page est correcte sur l\u2019ordinateur, mais sur le smartphone, les images s\u2019affichent les unes en dessous des autres ou les colonnes sont tr\u00e8s larges, bien que les images elles-m\u00eames soient petites. Quelle en est la &hellip; <a href=\"https:\/\/aivie.ch\/fr\/faq\/pourquoi-plusieurs-images-saffichent-elles-les-unes-en-dessous-des-autres-ou-trop-larges-sur-mobile\/\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">Pourquoi plusieurs images s&rsquo;affichent-elles les unes en dessous des autres ou trop larges sur mobile&nbsp;?<\/span><\/a><\/p>\n","protected":false},"featured_media":0,"template":"","categories":[],"tags":[],"FaqCategories":[521],"FaqTags":[1500,1123,1501],"class_list":["post-27937","faq","type-faq","status-publish","hentry","FaqCategories-e-mails-fr","FaqTags-constructeur-de-mails","FaqTags-images-fr","FaqTags-mobile"],"acf":[],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","post-thumbnail":"","aiv_480w":"","woocommerce_thumbnail":"","woocommerce_single":"","woocommerce_gallery_thumbnail":""},"post_excerpt_stackable_v2":"<p>J\u2019ai plac\u00e9 plusieurs images (par exemple, 3\u00a0logos de marque ou de produit) c\u00f4te \u00e0 c\u00f4te dans un e-mail.La mise en page est correcte sur l\u2019ordinateur, mais sur le smartphone, les images s\u2019affichent les unes en dessous des autres ou les colonnes sont tr\u00e8s larges, bien que les images elles-m\u00eames soient petites. Quelle en est la raison et comment puis-je contr\u00f4ler cela\u00a0? Il est important de comprendre les d\u00e9fis li\u00e9s \u00e0 l\u2019utilisation de plusieurs images sur mobile. Plusieurs images ne s\u2019affichent souvent pas de mani\u00e8re optimale sur mobile. Ce comportement correspond au comportement r\u00e9actif standard de MJML, car MJML est con\u00e7u\u2026<\/p>\n","category_list_v2":"Non class\u00e9","author_info_v2":{"name":"","url":""},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/faq\/27937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/types\/faq"}],"version-history":[{"count":12,"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/faq\/27937\/revisions"}],"predecessor-version":[{"id":28116,"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/faq\/27937\/revisions\/28116"}],"wp:attachment":[{"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/media?parent=27937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/categories?post=27937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/tags?post=27937"},{"taxonomy":"FaqCategories","embeddable":true,"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/FaqCategories?post=27937"},{"taxonomy":"FaqTags","embeddable":true,"href":"https:\/\/aivie.ch\/fr\/wp-json\/wp\/v2\/FaqTags?post=27937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}