{"id":27945,"date":"2026-01-28T09:58:56","date_gmt":"2026-01-28T07:58:56","guid":{"rendered":"https:\/\/aivie.ch\/faq\/why-are-multiple-images-displayed-under-each-other-or-too-wide-on-mobile-devices\/"},"modified":"2026-01-29T13:56:48","modified_gmt":"2026-01-29T11:56:48","slug":"why-are-multiple-images-displayed-under-each-other-or-too-wide-on-mobile-devices","status":"publish","type":"faq","link":"https:\/\/aivie.ch\/en\/faq\/why-are-multiple-images-displayed-under-each-other-or-too-wide-on-mobile-devices\/","title":{"rendered":"Why are multiple images displayed under each other or too wide on mobile devices?"},"content":{"rendered":"\n<p>I&#8217;ve placed multiple images (e.g., 3 brand or product logos) side by side in an email.<br\/>The layout is correct on the desktop, but on the smartphone, the images are displayed <strong>one below the other<\/strong>, or the columns are <strong>very wide<\/strong>, even though the images themselves are small. What&#8217;s the reason for this \u2013 and how can it be controlled? It&#8217;s important to understand the challenges associated with multiple images on mobile.  <\/p>\n\n<!--more-->\n\n<p>Multiple images are often not displayed optimally on mobile devices. This behavior corresponds to the <strong>standard responsive behavior of MJML<\/strong>, because MJML is mobile first:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Columns (<code>mj-column<\/code>) are <strong>stacked to 100% width<\/strong> by default on mobile<\/li>\n\n\n\n<li>This creates individual, very wide columns<\/li>\n\n\n\n<li>If \u00abFluid on mobile\u00bb is set to \u00abYes\u00bb at the same time, the image will be displayed across the entire width.<\/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\">What \u00abFluid on Mobile\u00bb does \u2013 and what it doesn&#8217;t do<\/h3>\n\n<p><strong>Fluid on Mobile = No<\/strong> means:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>The image is <strong>not automatically scaled to the full width<\/strong> on mobile<\/li>\n\n\n\n<li>The defined image width (e.g. <code>120px<\/code>) is retained <\/li>\n<\/ul>\n\n<p><strong>But:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>The surrounding column remains 100% wide<\/li>\n\n\n\n<li>The layout (next to each other vs. under each other) is <strong>not affected<\/strong> by this<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Solution: Use <code>mj-group<\/code> for fixed columns on mobile<\/h3>\n\n<p>To ensure that multiple images remain <strong>next to each other<\/strong> on mobile, the columns must be logically grouped.<\/p>\n\n<p>In MJML, a <strong><code>mj-group<\/code><\/strong> is used for this:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>mj-group<\/code>  prevents the automatic stacking of columns<\/li>\n\n\n\n<li>Percentage column widths (<code>33.33 %<\/code>, <code>50 %<\/code>) are retained<\/li>\n\n\n\n<li>Columns within a group must have a width in percent (not pixels)<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">How to display multiple images side by side in 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 in a row on mobile. A pattern in the 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>Open the Aivie Email Builder<\/li>\n\n\n\n<li>Select the \u00abImage Row\u00bb block on the left side<\/li>\n\n\n\n<li>Select the appropriate image with a double click<\/li>\n\n\n\n<li>Add more images as a block if necessary, or remove images that are not needed<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\">Advanced: Display multiple images side by side using code<\/h3>\n\n<p>Alternatively, you can solve it via the code. Here is some example code for a layout with three images: <\/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\">When you should group images<\/h3>\n\n<p>Use <code>mj-group<\/code> whenever:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Logos, brands, or products visually belong together<\/li>\n\n\n\n<li>Elements should remain next to each other on mobile<\/li>\n<\/ul>\n\n<p>This allows email layouts to be precisely controlled.<\/p>\n\n<p>If you want to further control how your emails are displayed on mobile, this article might be of interest: <a href=\"https:\/\/aivie.ch\/en\/faq\/how-can-i-display-images-or-buttons-only-on-desktop-or-only-on-mobile\/\" data-type=\"faq\" data-id=\"27941\">How can I display images or buttons only on desktop or only on mobile?<\/a> <\/p>\n\n<p>You can find out more about writing code with <code>mj-group<\/code> in the <a href=\"https:\/\/documentation.mjml.io\/#mj-group\" data-type=\"link\" data-id=\"https:\/\/documentation.mjml.io\/#mj-group\" target=\"_blank\" rel=\"noopener\">MJML documentation<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve placed multiple images (e.g., 3 brand or product logos) side by side in an email.The layout is correct on the desktop, but on the smartphone, the images are displayed one below the other, or the columns are very wide, even though the images themselves are small. What&#8217;s the reason for this \u2013 and how &hellip; <a href=\"https:\/\/aivie.ch\/en\/faq\/why-are-multiple-images-displayed-under-each-other-or-too-wide-on-mobile-devices\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Why are multiple images displayed under each other or too wide on mobile devices?<\/span><\/a><\/p>\n","protected":false},"featured_media":0,"template":"","categories":[],"tags":[],"FaqCategories":[281],"FaqTags":[1504,316,1505],"class_list":["post-27945","faq","type-faq","status-publish","hentry","FaqCategories-emails","FaqTags-email-builder","FaqTags-images","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>I&#8217;ve placed multiple images (e.g., 3 brand or product logos) side by side in an email.The layout is correct on the desktop, but on the smartphone, the images are displayed one below the other, or the columns are very wide, even though the images themselves are small. What&#8217;s the reason for this \u2013 and how can it be controlled? It&#8217;s important to understand the challenges associated with multiple images on mobile. Multiple images are often not displayed optimally on mobile devices. This behavior corresponds to the standard responsive behavior of MJML, because MJML is mobile first: Columns (mj-column) are stacked&hellip;<\/p>\n","category_list_v2":"Uncategorized","author_info_v2":{"name":"","url":""},"comments_num_v2":"0 comments","_links":{"self":[{"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/faq\/27945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/types\/faq"}],"version-history":[{"count":9,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/faq\/27945\/revisions"}],"predecessor-version":[{"id":28114,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/faq\/27945\/revisions\/28114"}],"wp:attachment":[{"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/media?parent=27945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/categories?post=27945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/tags?post=27945"},{"taxonomy":"FaqCategories","embeddable":true,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/FaqCategories?post=27945"},{"taxonomy":"FaqTags","embeddable":true,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/FaqTags?post=27945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}