Column aligned on mobile but row aligned on Desktop.

[felixmr1]

To help us help you, provide as much information as you can. You'll find below a template you can use to submit your issue, but feel free to remove any part that wouldn't be relevant here.

Looks good on mobile devices, but on desktop it gets wrongly aligned. (Its like 'flex-direction: column' on mobile but 'flex-direction: row' on desktop

On Mobile: (Right way) https://imgur.com/a/gJSJc

On Desktop: (Wrong way) https://imgur.com/a/E2q9z

MJML engine v3.3.3

This is all observed inside the mjml linux app

<mjml>
  <mj-head>
    <mj-font name="AmsiProNarw-BlackItalic" 
             href="https://d1l6nms9rbhl4q.cloudfront.net/wp-content/themes/ken-child/fonts/AmsiPro/314381_0_0.woff2" />
    <mj-font name="AmsiProNarw-Regular" 
             href="https://d1l6nms9rbhl4q.cloudfront.net/wp-content/themes/ken-child/fonts/AmsiPro/314381_2_0.woff2" />
    <mj-style inline="inline">
      .link-nostyle {
        color: inherit;
        text-decoration: none;
        font-style:italic;
      }
      @import url("https://hello.myfonts.net/count/314381");
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>

      <!--HEADER-->
      <mj-include path="./header.mjml" />

      <mj-column>
        <mj-text font-family="AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif">
          I detta mail kommer information om månadens abonnemangsfaktura. Vi hoppas att du trivs med ditt abonnemang och att allt fungerar smidigt. Du är alltid välkommen att höra av dig till oss på kundservice om du har några frågor eller funderingar. Du kan ringa oss på 0770 - 33 22 22 eller maila till hello@fello.se
        </mj-text>
      <mj-divider border-width="1px" border-style="solid" border-color="lightgrey" />

      </mj-column >

      <!--FIRST-->
      <mj-column>
        <mj-table>
          <tr style="font-size:10px; white-space: nowrap; font-family:AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif" >
            <th>Faktura ifrån</th>
            <th>Motagare</th>
            <th>Betalningsmetod</th>
          </tr>
          <tr style="text-align:center; font-family:AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif">
            <td>Fello</td>
            <td>John Axelberg</td>
            <td>Autogiro/epost</td>
          </tr>
        </mj-table>
      <mj-divider border-width="1px" border-style="solid" border-color="lightgrey" />
      </mj-column>

      <!--SECOND-->
      <mj-column>
        <mj-text font-size="12px" font-family="AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif">
          Belopp:
        </mj-text>       
        <mj-text font-size="35px" font-weight="bold" padding-bottom="20px" font-family="AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif"> 
          140.00 KR
        </mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="lightgrey" />
      </mj-column>

      <!--THIRD-->
      <mj-column>
        <mj-table>
          <tr style="font-size:10px; white-space: nowrap; font-family:AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif">
            <th>Totalsumma</th>
            <th>Bankgiro</th>
            <th>OCR/Refnr</th>
            <th>Förfallodatum</th>
          </tr>
          <tr style="font-size:12px; text-align:center; white-space: nowrap; font-family:AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif">
            <td>145.00 KR</td>
            <td style="padding: 0px 3px 0px 6px;">574-7290</td>
            <td style="padding: 0px 6px 0px 3px ;">1234567890</td>
            <td >2017-11-30</td>
          </tr>
        </mj-table>
        <mj-divider border-width="1px" border-style="solid" border-color="lightgrey" />
      </mj-column>

      <!--FOURTH-->
      <mj-column>
        <mj-text font-family="AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif">
          Har du Autogiro som betalningsmetod kommer beloppet att dras per automatik på förfallodagen. Du som har en annan betalningsmetod och önskar du byta till autogiro kan göra detta via internetbanken genom att söka upp Fello AB som betalningsmottagare och fylla i anmälningsformuläret. Det är supersmidigt!
          <br></br>
          Lägg PDF faktura här
          <br></br>
          För att kunna läsa ett pdf-dokument behövs Adobe Reader. Det är en kostnadsfri programvara som kan hämtas hem från www.adobe.se
        </mj-text>       
      </mj-column>

      <!--SOCIAL MEDIA-->
      <mj-section background-color="#fff">
        <mj-column>
          <mj-divider border-width="1px" border-style="solid" border-color="lightgrey" />
          <mj-text align="center" color="#000000" font-size="15px" font-family="AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif">
            Följ oss gärna för viktiga uppdateringar och det senaste från kontoret.
          </mj-text>
          <mj-table color="#000" font-family="AmsiProNarw-BlackItalic, Arial, Helvetica, sans-serif">
            <tr style="text-align:center;" color="#000">
              <td> 
                <a href="https://www.facebook.com/Fello-1439776142994229/" class="link-nostyle" >
                  <image src="https://cdn.fello.se/wp-content/uploads/2017/06/01072416/004-facebook-logo.png" width="40"/> 
                  <br><br>Facebook
                </a>
              </td>
              <td>
                <a href="https://www.instagram.com/fello.se/" class="link-nostyle" > 
                  <image src="https://cdn.fello.se/wp-content/uploads/2017/06/01072415/003-instagram-social-network-logo-of-photo-camera.png" width="40"/> 
                  <br><br>Instagram
                </a>
              </td>
              <td>
                <a  href="https://www.twitter.com/fello_se/" class="link-nostyle" >
                  <image src="https://cdn.fello.se/wp-content/uploads/2017/06/01072415/002-twitter-logo-silhouette.png" width="40"/>
                  <br><br>Twitter
                </a>
              </td>
              <td>
                <a href="https://www.youtube.com/channel/UCS2KBUhhk3_3KBBaWgnlWcw" class="link-nostyle" >
                  <image src="https://cdn.fello.se/wp-content/uploads/2017/06/01072414/001-youtube-logo.png" width="40"/>
                  <br><br>YouTube
                </a>
              </td>
            </tr>
          </mj-table>
        </mj-column>
      </mj-section>

      <!--FOOTER-->
      <mj-include path="./footer.mjml" />
    </mj-container>
  </mj-body>
</mjml>

[ngarnier]

How can we help without any code? :)

Please share the MJML (it's too bad you started with the issue template but didn't follow it).

[felixmr1]

@ngarnier Sorry! I updated it :)

[ngarnier]

Thanks. Your first 4 columns should be contained in a <mj-section>, the syntax is always to have columns inside sections, not straight inside the container.

However, I'm not sure what you want the layout to be on desktop? If you want it to be the same than on mobile, then just replace your columns by sections: https://mjml.io/try-it-live/rJ5-4vlUG.

• mj-section: a row in your email
• mj-column: a column in your email (must be inside a section)

[felixmr1]

@ngarnier Thanks man. Works like a charm!

[ngarnier]

Perfect, happy to help!