{"id":27934,"date":"2026-01-28T09:57:34","date_gmt":"2026-01-28T07:57:34","guid":{"rendered":"https:\/\/aivie.ch\/faq\/perche-piu-immagini-su-mobile-vengono-visualizzate-una-sotto-laltra-o-troppo-larghe\/"},"modified":"2026-01-29T13:56:51","modified_gmt":"2026-01-29T11:56:51","slug":"perche-piu-immagini-su-mobile-vengono-visualizzate-una-sotto-laltra-o-troppo-larghe","status":"publish","type":"faq","link":"https:\/\/aivie.ch\/it\/faq\/perche-piu-immagini-su-mobile-vengono-visualizzate-una-sotto-laltra-o-troppo-larghe\/","title":{"rendered":"Perch\u00e9 pi\u00f9 immagini su mobile vengono visualizzate una sotto l&#8217;altra o troppo larghe?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ho inserito diverse immagini (ad es. 3 loghi di marchi o prodotti) una accanto all&#8217;altra in un&#8217;e-mail.<br\/>Il layout \u00e8 corretto sul desktop, ma sullo smartphone le immagini vengono visualizzate <strong>una sotto l&#8217;altra<\/strong> oppure le colonne sono <strong>molto larghe<\/strong>, anche se le immagini stesse sono piccole. Qual \u00e8 il motivo e come si pu\u00f2 controllare? \u00c8 importante capire le sfide associate a pi\u00f9 immagini su mobile.  <\/p>\n\n<!--more-->\n\n<p class=\"wp-block-paragraph\">Spesso, pi\u00f9 immagini non vengono visualizzate in modo ottimale sui dispositivi mobili. Questo comportamento corrisponde al <strong>comportamento responsive standard di MJML<\/strong>, poich\u00e9 MJML \u00e8 mobile-first:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Le colonne (<code>mj-column<\/code>) vengono <strong>impilate al 100% della larghezza<\/strong> su mobile per impostazione predefinita<\/li>\n\n\n\n<li>Questo crea singole colonne molto larghe<\/li>\n\n\n\n<li>Se contemporaneamente \u00e8 impostato \u00abFluid on mobile\u00bb su \u00abS\u00ec\u00bb, l&#8217;immagine viene visualizzata a tutta larghezza<\/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\">Cosa fa \u00abFluid on Mobile\u00bb e cosa no<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>Fluid on Mobile = No<\/strong> significa:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>L&#8217;immagine non viene <strong>automaticamente ridimensionata a tutta larghezza<\/strong> su mobile<\/li>\n\n\n\n<li>La larghezza dell&#8217;immagine definita (ad es. <code>120px<\/code>) viene mantenuta <\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\"><strong>Ma:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>La colonna circostante rimane comunque larga al 100%<\/li>\n\n\n\n<li>Il layout (uno accanto all&#8217;altro o uno sotto l&#8217;altro) <strong>non ne risente<\/strong><\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Soluzione: <code>mj-group<\/code> da utilizzare per colonne fisse su mobile<\/h3>\n\n<p class=\"wp-block-paragraph\">Affinch\u00e9 pi\u00f9 immagini rimangano <strong>una accanto all&#8217;altra<\/strong> anche su mobile, le colonne devono essere raggruppate logicamente.<\/p>\n\n<p class=\"wp-block-paragraph\">A tale scopo, in MJML viene utilizzato un <strong><code>mj-group<\/code><\/strong>:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>mj-group<\/code> impedisce l&#8217;impilamento automatico delle colonne<\/li>\n\n\n\n<li>Le larghezze delle colonne percentuali (<code>33.33 %<\/code>, <code>50 %<\/code>) vengono mantenute<\/li>\n\n\n\n<li>Le colonne all&#8217;interno di un gruppo devono necessariamente avere una larghezza in percentuale (non in pixel)<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Come visualizzare pi\u00f9 immagini affiancate 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=\"Immagini su mobile in fila. Un pattern nell&#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>Apri l&#8217;Aivie Email Builder<\/li>\n\n\n\n<li>Seleziona il blocco \u00abSerie di immagini\u00bb sul lato sinistro<\/li>\n\n\n\n<li>Seleziona l&#8217;immagine desiderata con un doppio clic<\/li>\n\n\n\n<li>Aggiungi altre immagini come blocco, se necessario, oppure rimuovi le immagini non necessarie<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\">Avanzato: come visualizzare pi\u00f9 immagini affiancate tramite codice<\/h3>\n\n<p class=\"wp-block-paragraph\">In alternativa, puoi risolverlo tramite il codice. Ecco un codice di esempio per un layout con tre immagini: <\/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\">Quando raggruppare le immagini<\/h3>\n\n<p class=\"wp-block-paragraph\">Usa <code>mj-group<\/code> sempre quando:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Loghi, marchi o prodotti appartengono visivamente insieme<\/li>\n\n\n\n<li>Gli elementi devono rimanere uno accanto all&#8217;altro anche su mobile<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">In questo modo, i layout delle e-mail possono essere controllati con precisione.<\/p>\n\n<p class=\"wp-block-paragraph\">Se vuoi controllare ulteriormente come vengono visualizzate le tue e-mail sui dispositivi mobili, questo articolo potrebbe interessarti: <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\">Come posso visualizzare immagini o pulsanti solo su desktop o solo su dispositivi mobili?<\/a> <\/p>\n\n<p class=\"wp-block-paragraph\">Per saperne di pi\u00f9 sulla scrittura di codice con <code>mj-group<\/code>, consulta la <a href=\"https:\/\/documentation.mjml.io\/#mj-group\" data-type=\"link\" data-id=\"https:\/\/documentation.mjml.io\/#mj-group\" target=\"_blank\" rel=\"noopener\">documentazione MJML<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ho inserito diverse immagini (ad es. 3 loghi di marchi o prodotti) una accanto all&#8217;altra in un&#8217;e-mail.Il layout \u00e8 corretto sul desktop, ma sullo smartphone le immagini vengono visualizzate una sotto l&#8217;altra oppure le colonne sono molto larghe, anche se le immagini stesse sono piccole. Qual \u00e8 il motivo e come si pu\u00f2 controllare? \u00c8 &hellip; <a href=\"https:\/\/aivie.ch\/it\/faq\/perche-piu-immagini-su-mobile-vengono-visualizzate-una-sotto-laltra-o-troppo-larghe\/\" class=\"more-link\">Continua a leggere <span class=\"screen-reader-text\">Perch\u00e9 pi\u00f9 immagini su mobile vengono visualizzate una sotto l&#8217;altra o troppo larghe?<\/span><\/a><\/p>\n","protected":false},"featured_media":0,"template":"","categories":[],"tags":[],"FaqCategories":[523],"FaqTags":[1498,1128,1499],"class_list":["post-27934","faq","type-faq","status-publish","hentry","FaqCategories-email","FaqTags-email-builder","FaqTags-immagini","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>Ho inserito diverse immagini (ad es. 3 loghi di marchi o prodotti) una accanto all&#8217;altra in un&#8217;e-mail.Il layout \u00e8 corretto sul desktop, ma sullo smartphone le immagini vengono visualizzate una sotto l&#8217;altra oppure le colonne sono molto larghe, anche se le immagini stesse sono piccole. Qual \u00e8 il motivo e come si pu\u00f2 controllare? \u00c8 importante capire le sfide associate a pi\u00f9 immagini su mobile. Spesso, pi\u00f9 immagini non vengono visualizzate in modo ottimale sui dispositivi mobili. Questo comportamento corrisponde al comportamento responsive standard di MJML, poich\u00e9 MJML \u00e8 mobile-first: Le colonne (mj-column) vengono impilate al 100% della larghezza su\u2026<\/p>\n","category_list_v2":"Senza categoria","author_info_v2":{"name":"","url":""},"comments_num_v2":"0 commento","_links":{"self":[{"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/faq\/27934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/types\/faq"}],"version-history":[{"count":14,"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/faq\/27934\/revisions"}],"predecessor-version":[{"id":28115,"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/faq\/27934\/revisions\/28115"}],"wp:attachment":[{"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/media?parent=27934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/categories?post=27934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/tags?post=27934"},{"taxonomy":"FaqCategories","embeddable":true,"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/FaqCategories?post=27934"},{"taxonomy":"FaqTags","embeddable":true,"href":"https:\/\/aivie.ch\/it\/wp-json\/wp\/v2\/FaqTags?post=27934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}