{"id":27940,"date":"2026-01-28T09:57:43","date_gmt":"2026-01-28T07:57:43","guid":{"rendered":"https:\/\/aivie.ch\/faq\/miksi-useat-kuvat-naekyvaet-matkapuhelimessa-toistensa-alapuolella-tai-liian-leveinae\/"},"modified":"2026-01-29T13:56:51","modified_gmt":"2026-01-29T11:56:51","slug":"miksi-useat-kuvat-naekyvaet-matkapuhelimessa-toistensa-alapuolella-tai-liian-leveinae","status":"publish","type":"faq","link":"https:\/\/aivie.ch\/fi\/faq\/miksi-useat-kuvat-naekyvaet-matkapuhelimessa-toistensa-alapuolella-tai-liian-leveinae\/","title":{"rendered":"Miksi useat kuvat n\u00e4kyv\u00e4t matkapuhelimessa toistensa alapuolella tai liian levein\u00e4?"},"content":{"rendered":"\n<p>Olen sijoittanut useita kuvia (esim. 3 tuotemerkin tai tuotteen logoa) vierekk\u00e4in s\u00e4hk\u00f6postiin.<br\/>Asettelu on oikea ty\u00f6p\u00f6yd\u00e4ll\u00e4, mutta \u00e4lypuhelimessa kuvat n\u00e4kyv\u00e4t yksi <strong>toisensa<\/strong> alla <strong>tai sarakkeet<\/strong> ovat hyvin leve\u00e4t, <strong>vaikka<\/strong> itse kuvat ovat pieni\u00e4. Miksi n\u00e4in on \u2013 ja miten sit\u00e4 voi hallita? On t\u00e4rke\u00e4\u00e4 ymm\u00e4rt\u00e4\u00e4 haasteet, jotka liittyv\u00e4t useisiin kuviin mobiilissa.  <\/p>\n\n<!--more-->\n\n<p>Useat kuvat eiv\u00e4t useinkaan n\u00e4y optimaalisesti mobiilissa. T\u00e4m\u00e4 k\u00e4ytt\u00e4ytyminen vastaa <strong>MJML:n tavallista responsiivista k\u00e4ytt\u00e4ytymist\u00e4.<\/strong> Koska MJML on mobiililaitteet ensin:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Sarakkeet (<code>mj-column<\/code><strong>) pinotaan<\/strong> oletusarvoisesti 100 %:n leveyteen mobiililaitteissa.<\/li>\n\n\n\n<li>T\u00e4m\u00e4 luo yksitt\u00e4isi\u00e4, hyvin leveit\u00e4 pylv\u00e4it\u00e4<\/li>\n\n\n\n<li>Jos &#8221;Fluid on mobile\u201d on samalla asetettu &#8221;Kyll\u00e4\u201d, kuva n\u00e4ytet\u00e4\u00e4n koko leveydelt\u00e4.<\/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\">Mit\u00e4 &#8221;Fluid on Mobile\u201d tekee \u2013 ja mit\u00e4 se ei tee?<\/h3>\n\n<p><strong>Fluid on Mobile = Ei keinoja<\/strong>:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Kuva <strong>ei skaalautu automaattisesti koko leveydelle mobiililaitteessa.<\/strong><\/li>\n\n\n\n<li>M\u00e4\u00e4ritelty kuvan leveys (esim. <code>120px<\/code>) s\u00e4ilytet\u00e4\u00e4n. <\/li>\n<\/ul>\n\n<p><strong>Mutta:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Ymp\u00e4r\u00f6iv\u00e4 pylv\u00e4s pysyy 100 % leve\u00e4n\u00e4<\/li>\n\n\n\n<li><strong>T\u00e4m\u00e4<\/strong> ei vaikuta asetteluun (vierekk\u00e4in vs. toistensa alla).<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Ratkaisu: K\u00e4yt\u00e4 <code>mj-group<\/code> kiinteit\u00e4 sarakkeita varten mobiililaitteissa.<\/h3>\n\n<p>Sarakkeet on ryhmitelt\u00e4v\u00e4 loogisesti siten, ett\u00e4 useat kuvat pysyv\u00e4t <strong>vierekk\u00e4in mobiilissa<\/strong>.<\/p>\n\n<p>T\u00e4t\u00e4 tarkoitusta varten MJML k\u00e4ytt\u00e4\u00e4 <strong><code>mj-group<\/code><\/strong> k\u00e4ytet\u00e4\u00e4n:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>mj-group<\/code>  Est\u00e4\u00e4 pylv\u00e4iden automaattisen pinoamisen<\/li>\n\n\n\n<li>Prosenttiset sarakeleveydet (<code>33.33 %<\/code>, <code>50 %<\/code>) s\u00e4ilytet\u00e4\u00e4n.<\/li>\n\n\n\n<li>Ryhm\u00e4n sis\u00e4ll\u00e4 olevien sarakkeiden leveyden on oltava prosentteina (ei pikselein\u00e4).<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Kuinka n\u00e4ytt\u00e4\u00e4 useita kuvia vierekk\u00e4in Aivie-ohjelmassa?<\/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=\"Kuvat matkapuhelimessa per&#xE4;kk&#xE4;in. Kuvio Aivie Email Builderissa \" 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>Avaa Aivie email builder<\/li>\n\n\n\n<li>Valitse vasemmalla puolella oleva &#8221;Kuvasarja\u201d-lohko.<\/li>\n\n\n\n<li>Valitse sopiva kuva kaksoisnapsauttamalla<\/li>\n\n\n\n<li>Lis\u00e4\u00e4 tarvittaessa lis\u00e4\u00e4 kuvia lohkona tai poista kuvia, joita ei tarvita.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\">Edistyneempi: N\u00e4yt\u00e4 useita kuvia vierekk\u00e4in koodin avulla.<\/h3>\n\n<p>Vaihtoehtoisesti voit ratkaista sen my\u00f6s koodin avulla. T\u00e4ss\u00e4 on esimerkkikoodi kolmella kuvalla varustetulle ulkoasulle: <\/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\">Milloin kuvat kannattaa ryhmitell\u00e4<\/h3>\n\n<p>K\u00e4yt\u00e4 aina <code>mj-group<\/code> kun:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Logot, tuotemerkit tai tuotteet kuuluvat visuaalisesti yhteen.<\/li>\n\n\n\n<li>elementtien tulisi my\u00f6s pysy\u00e4 vierekk\u00e4in mobiililaitteissa.<\/li>\n<\/ul>\n\n<p>N\u00e4in s\u00e4hk\u00f6postin ulkoasuja voidaan hallita tarkasti.<\/p>\n\n<p>Jos haluat hallita tarkemmin sit\u00e4, miten s\u00e4hk\u00f6postisi n\u00e4ytet\u00e4\u00e4n mobiililaitteissa, t\u00e4m\u00e4 artikkeli voi olla mielenkiintoinen: <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\">Miten voin n\u00e4ytt\u00e4\u00e4 kuvia tai painikkeita vain ty\u00f6p\u00f6yd\u00e4ll\u00e4 tai vain mobiilissa?<\/a> <\/p>\n\n<p>Lis\u00e4tietoja koodin kirjoittamisesta <code>mj-group<\/code> <a href=\"https:\/\/documentation.mjml.io\/#mj-group\" data-type=\"link\" data-id=\"https:\/\/documentation.mjml.io\/#mj-group\" target=\"_blank\" rel=\"noopener\">-ohjelmalla on MJML-dokumentaatiossa.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Olen sijoittanut useita kuvia (esim. 3 tuotemerkin tai tuotteen logoa) vierekk\u00e4in s\u00e4hk\u00f6postiin.Asettelu on oikea ty\u00f6p\u00f6yd\u00e4ll\u00e4, mutta \u00e4lypuhelimessa kuvat n\u00e4kyv\u00e4t yksi toisensa alla tai sarakkeet ovat hyvin leve\u00e4t, vaikka itse kuvat ovat pieni\u00e4. Miksi n\u00e4in on \u2013 ja miten sit\u00e4 voi hallita? On t\u00e4rke\u00e4\u00e4 ymm\u00e4rt\u00e4\u00e4 haasteet, jotka liittyv\u00e4t useisiin kuviin mobiilissa.<\/p>\n","protected":false},"featured_media":0,"template":"","categories":[],"tags":[],"FaqCategories":[1318],"FaqTags":[1409,1503,1502],"class_list":["post-27940","faq","type-faq","status-publish","hentry","FaqCategories-saehkoepostit","FaqTags-kuvat","FaqTags-mobiili","FaqTags-saehkoepostin-rakentaja"],"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>Olen sijoittanut useita kuvia (esim. 3 tuotemerkin tai tuotteen logoa) vierekk\u00e4in s\u00e4hk\u00f6postiin.Asettelu on oikea ty\u00f6p\u00f6yd\u00e4ll\u00e4, mutta \u00e4lypuhelimessa kuvat n\u00e4kyv\u00e4t yksi toisensa alla tai sarakkeet ovat hyvin leve\u00e4t, vaikka itse kuvat ovat pieni\u00e4. Miksi n\u00e4in on \u2013 ja miten sit\u00e4 voi hallita? On t\u00e4rke\u00e4\u00e4 ymm\u00e4rt\u00e4\u00e4 haasteet, jotka liittyv\u00e4t useisiin kuviin mobiilissa. Useat kuvat eiv\u00e4t useinkaan n\u00e4y optimaalisesti mobiilissa. T\u00e4m\u00e4 k\u00e4ytt\u00e4ytyminen vastaa MJML:n tavallista responsiivista k\u00e4ytt\u00e4ytymist\u00e4. Koska MJML on mobiililaitteet ensin: Sarakkeet (mj-column) pinotaan oletusarvoisesti 100 %:n leveyteen mobiililaitteissa. T\u00e4m\u00e4 luo yksitt\u00e4isi\u00e4, hyvin leveit\u00e4 pylv\u00e4it\u00e4 Jos &#8221;Fluid on mobile\u201d on samalla asetettu &#8221;Kyll\u00e4\u201d, kuva n\u00e4ytet\u00e4\u00e4n koko leveydelt\u00e4. Mit\u00e4 &#8221;Fluid on Mobile\u201d tekee\u2026<\/p>\n","category_list_v2":"Yleinen","author_info_v2":{"name":"","url":""},"comments_num_v2":"0 comments","_links":{"self":[{"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/faq\/27940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/types\/faq"}],"version-history":[{"count":11,"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/faq\/27940\/revisions"}],"predecessor-version":[{"id":28117,"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/faq\/27940\/revisions\/28117"}],"wp:attachment":[{"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/media?parent=27940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/categories?post=27940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/tags?post=27940"},{"taxonomy":"FaqCategories","embeddable":true,"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/FaqCategories?post=27940"},{"taxonomy":"FaqTags","embeddable":true,"href":"https:\/\/aivie.ch\/fi\/wp-json\/wp\/v2\/FaqTags?post=27940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}