title: How to prevent inline bloc from my email to stack on iPad?
body: <p>I originally created an email using MJML and adapted the code to improve the mobile version.</p>
  
  <p>1) I haven't any problem while checking the email with chrome and testing it with all desktop client with litmus, but the ipad version of the email stack inline blocks. </p>
  
  <p>2) Some elements only displayed on mobile using media queries are not visible when testing the email whereas I can see them with chrome.</p>
  
  <p>Here is the preview of the issues: 
  <a href="http://i.stack.imgur.com/wGq96.jpg" rel="nofollow">enter image description here</a></p>
  
  <p>Here is the link of the html file: 
  <a href="http://bank.digital-expression.fr/universcience/email-universcience.html" rel="nofollow">Html file</a></p>
  
  <p>Here is the beginning of the code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Invitiation à l'avant-première "Quoi de neuf au moyen âge ?"&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    
    &lt;!--[if !mso]&gt;&lt;!--&gt;
    &lt;style type="text/css"&gt;
      @media (max-width:660px) {
        @-ms-viewport { width: 320px; }
        @viewport { width: 320px; }
      }  
    &lt;/style&gt;
    &lt;!--&lt;![endif]--&gt;
  
    &lt;style type="text/css"&gt;
      #outlook a { padding: 0; }
      .ReadMsgBody { width: 100%; }
      .ExternalClass { width: 100%; }
      .ExternalClass * { line-height: 100%; }
      body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
      table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
      img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
      p { display: block; margin: 13px 0; }
      .hidden-desktop {display: none!important; max-height: 0; font-size: 0; overflow: hidden; line-height: 0; mso-hide: all;}
    
      @media (min-width:660px) {
        .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 100%!important; }
        .mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 200px!important; }
        .mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 30px!important; }
        .mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 430px!important; }
        .mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 410px!important; }
        .mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 20px!important; }
      }       
      @media (max-width:659px) {
        .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 280px!important; display: block!important; margin: 0 auto; }
        .mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 280px!important; display: block!important; margin: 0 auto; }
        .mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 0px!important; }
        .mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 280px!important; display: block!important; margin: 0 auto; }
        .mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 280px!important; display: block!important; margin: 0 auto; }
        .mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 0px!important; }   
        .invitation-desktop { display: none!important; }  
        .image-expo { height: 400px!important; background-repeat: no-repeat!important; }
        .hidden-desktop{ display: block!important; max-height: none!important; font-size: 12px; line-height: 1.5!important; overflow: visible!important; }
        .mobile-space{ height: 20px; }
        .mobile-auto-height{ height: auto!important; }
        .hidden-mobile{ display: none!important }
        .logo-table { width: 80px!important; float: left; }
        .logo-padding { padding: 7px!important; }
        .logo { width:66px!important;height:66px!important; }
        .invitation-mobile-title{ width: 200px; float: left; height: 80px;}
        .social-mobile{ width: 80px!important; height: 80px; display: inline-block!important; }
        .social-space-mobile { width: 20px!important; }      
      }     
    &lt;/style&gt;  
  
  
    &lt;!--[if mso]&gt;
    &lt;xml&gt;
      &lt;o:OfficeDocumentSettings&gt;
        &lt;o:AllowPNG/&gt;
        &lt;o:PixelsPerInch&gt;96&lt;/o:PixelsPerInch&gt;
      &lt;/o:OfficeDocumentSettings&gt;
    &lt;/xml&gt;
    &lt;![endif]--&gt;
  
    &lt;!--[if !mso]&gt;&lt;!--&gt;  
    &lt;link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700" rel="stylesheet" type="text/css"&gt;
    &lt;!--&lt;![endif]--&gt;
   
  
  &lt;/head&gt;
  
  &lt;body style="background: #e8e8e8;"&gt;
    &lt;div style="background-color:#e8e8e8;"&gt;
  
    &lt;!--[if mso | IE]&gt;
    &lt;table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;"&gt;
      &lt;tr&gt;
        &lt;td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"&gt;
        &lt;![endif]--&gt;
  
          &lt;div style="margin:0 auto;max-width:660px;"&gt;
            &lt;table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;"&gt;
  
                  &lt;!--[if mso | IE]&gt;
                  &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                    &lt;tr&gt;
                      &lt;td style="vertical-align:top;width:660px;"&gt;
                      &lt;![endif]--&gt;
  
                        &lt;div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"&gt;
                          &lt;table cellpadding="0" cellspacing="0" width="100%" border="0"&gt;
                            &lt;tbody&gt;
                              &lt;tr&gt;
                                &lt;td style="word-break:break-word;font-size:0px;padding:15px;" align="center"&gt;
                                  &lt;div style="cursor:auto;color:#a6a6a6;font-family:'Lato', Arial, sans-serif;font-size:11px;font-weight:300;line-height:13px;text-transform:none;"&gt;
                                    Vous avez des problèmes d’affichage ?
                                    &lt;a href="#" style="font-weight: 300; font-size: 11px; text-transform: none; font-family:'Lato', Arial, sans-serif; color:#a6a6a6"&gt;
                                      Visualiser cet email en ligne
                                    &lt;/a&gt;
                                  &lt;/div&gt;
                                &lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/tbody&gt;
                          &lt;/table&gt;
                        &lt;/div&gt;
  
                        &lt;!--[if mso | IE]&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;![endif]--&gt;
  
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
  
        &lt;!--[if mso | IE]&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;![endif]--&gt;
  
    &lt;!--[if mso | IE]&gt;
    &lt;table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;"&gt;
      &lt;tr&gt;
        &lt;td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"&gt;
        &lt;![endif]--&gt;
  
          &lt;div style="margin:0 auto;max-width:660px;"&gt;
            &lt;table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;"&gt;
  
                    &lt;!--[if mso | IE]&gt;
                    &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                      &lt;tr&gt;
                        &lt;td style="vertical-align:top;width:200px;"&gt;
                        &lt;![endif]--&gt;
  
                          &lt;div aria-labelledby="mj-column-px-200" class="mj-column-px-200" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:200px;"&gt;
                            &lt;table class="logo-table" cellpadding="0" cellspacing="0" style="vertical-align:top;background:#fff;" width="100%" border="0"&gt;
                              &lt;tbody&gt;
                                &lt;tr&gt;
                                  &lt;td class="logo-padding" style="word-break:break-word;font-size:0px;padding:25px;" align="center"&gt;
                                    &lt;table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"&gt;
                                      &lt;tbody&gt;
                                        &lt;tr&gt;
                                          &lt;td style="width:150px;"&gt;
                                            &lt;img class="logo" alt="" title="" height="150px" src="http://bank.digital-expression.fr/universcience/logo-cite.png" style="border:none;display:block;outline:none;text-decoration:none;width:100%;height:150px;" width="150"&gt;
                                          &lt;/td&gt;
                                        &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                    &lt;/table&gt;
                                  &lt;/td&gt;
                                &lt;/tr&gt;
                              &lt;/tbody&gt;
                            &lt;/table&gt;
  
                            &lt;!--[if !mso]&gt;&lt;!--&gt;
                            &lt;table class="hidden-desktop invitation-mobile-title" cellpadding="0" cellspacing="0" width="200px" border="0" style="border-collapse:collapse;border-spacing:0px;"&gt;
                              &lt;tbody&gt;
                                &lt;tr&gt;
                                  &lt;td width="20px"&gt;
                                  &lt;/td&gt;
                                  &lt;td width="180px"&gt;
                                    &lt;table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0"&gt;
                                      &lt;tbody&gt;
                                        &lt;tr&gt;
                                          &lt;td style="word-break:break-word;font-size:0px;padding:11px 0px;background-color:#d81921;" align="center"&gt;
                                            &lt;div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:28px;font-weight:400;line-height:28px;text-transform:uppercase;"&gt;Invitation&lt;/div&gt;
                                          &lt;/td&gt;
                                        &lt;/tr&gt;
                                        &lt;tr&gt;
                                         &lt;td style="word-break:break-word;font-size:0px;padding:0px 0px;background-color:#000" align="center"&gt;
                                            &lt;div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:15px;font-weight:400;line-height:30px;text-transform:uppercase;"&gt;
                                              &lt;span style="letter-spacing: 3px"&gt;
                                                avant-première
                                              &lt;/span&gt;
                                            &lt;/div&gt;
                                          &lt;/td&gt;
                                        &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                    &lt;/table&gt;
                                  &lt;/td&gt;
                                &lt;/tr&gt;
                              &lt;/tbody&gt;
                            &lt;/table&gt;
                            &lt;div style="clear:both;"&gt;&lt;/div&gt;
                            &lt;!--&lt;![endif]--&gt;                          
                          &lt;/div&gt;
                           
  
  
  
                        &lt;!--[if mso | IE]&gt;
                        &lt;/td&gt;
                        &lt;td style="vertical-align:top;width:30px;"&gt;
                        &lt;![endif]--&gt;
  
                          &lt;!--[if !mso]&gt;&lt;!--&gt;
                          &lt;div class="mobile-space hidden-desktop" style="font-size:1px;line-height:30px;"&gt;&amp;nbsp;&lt;/div&gt;
                          &lt;!--&lt;![endif]--&gt; 
  
                          &lt;div aria-labelledby="mj-column-px-30" class="mj-column-px-30" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:30px;"&gt;
                            &lt;table cellpadding="0" cellspacing="0" width="100%" border="0"&gt;
                              &lt;tbody&gt;
                              &lt;/tbody&gt;
                            &lt;/table&gt;
                          &lt;/div&gt;
  
                        &lt;!--[if mso | IE]&gt;
                        &lt;/td&gt;
                        &lt;td style="vertical-align:top;width:430px;"&gt;
                        &lt;![endif]--&gt;
  
                          &lt;div aria-labelledby="mj-column-px-430" class="mj-column-px-430" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:430px;"&gt;
                            &lt;table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0"&gt;
                              &lt;tbody&gt;
                                &lt;tr&gt;
                                  &lt;td style="word-break:break-word;font-size:0px;padding:0px;" align="left"&gt;
                                    &lt;div class="image-expo" style="margin:0 auto;height:200px;max-width:430px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;"&gt;
  
                                      &lt;!--[if mso | IE]&gt;
                                      &lt;v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:430px;"&gt;
                                      &lt;v:fill origin="0.5, 0" position="0.5,0" type="tile" src="http://bank.digital-expression.fr/universcience/bg-expo.jpg" /&gt;
                                      &lt;v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"&gt;
                                      &lt;![endif]--&gt;
  
                                      &lt;table class="image-expo" cellpadding="0" cellspacing="0" height="200px" style="font-size:0px;width:100%;height:200px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;" align="center" border="0" background="http://bank.digital-expression.fr/universcience/bg-expo.jpg"&gt;
                                        &lt;tbody&gt;
                                          &lt;tr&gt;
                                            &lt;td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;"&gt;
  
                                            &lt;!--[if mso | IE]&gt;
                                              &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                                                &lt;tr&gt;
                                                  &lt;td style="vertical-align:top;width:410px;"&gt;
                                                  &lt;![endif]--&gt;
  
                                                    &lt;div aria-labelledby="mj-column-px-410" class="mj-column-px-410" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"&gt;
                                                      &lt;table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0"&gt;
                                                        &lt;tbody&gt;
                                                          &lt;tr&gt;
                                                            &lt;td style="word-break:break-word;font-size:0px;padding:0px;"&gt;
                                                              &lt;div style="font-size:1px;line-height:20px;"&gt;&amp;nbsp;&lt;/div&gt;
                                                            &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                          &lt;tr&gt;
                                                            &lt;td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left"&gt;
                                                              &lt;div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:30px;font-weight:700;line-height:30px;text-transform:uppercase;"&gt;
                                                                Quoi de neuf&lt;br&gt; au moyen âge ?
                                                              &lt;/div&gt;
                                                            &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                          &lt;tr&gt;
                                                            &lt;td style="word-break:break-word;font-size:0px;padding:0px;"&gt;
                                                              &lt;div style="font-size:1px;line-height:20px;"&gt;&amp;nbsp;&lt;/div&gt;
                                                            &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                          &lt;tr&gt;
                                                            &lt;td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left"&gt;
                                                              &lt;div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:14px;font-weight:400;line-height:16px;text-transform:uppercase;"&gt;
                                                                TOUT CE QUE L’ARCHEOLOGIE&lt;br&gt; NOUS RÉVÈLE
                                                              &lt;/div&gt;
                                                            &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                          &lt;tr&gt;
                                                            &lt;td style="word-break:break-word;font-size:0px;padding:0px;"&gt;
                                                              &lt;div style="font-size:1px;line-height:10px;"&gt;&amp;nbsp;&lt;/div&gt;
                                                            &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                          &lt;tr&gt;
                                                            &lt;td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left"&gt;
                                                              &lt;div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:40px;font-weight:700;line-height:40px;text-transform:uppercase;"&gt;
                                                                &lt;a href="#" style="color: #ffffff; text-decoration: none; padding: 0px"&gt;+&lt;/a&gt;
                                                              &lt;/div&gt;
                                                            &lt;/td&gt;
                                                          &lt;/tr&gt;
                                                        &lt;/tbody&gt;
                                                      &lt;/table&gt;
                                                    &lt;/div&gt;
  
                                                  &lt;!--[if mso | IE]&gt;
                                                  &lt;/td&gt;
                                                  &lt;td style="vertical-align:top;width:20px;"&gt;
                                                  &lt;![endif]--&gt;
  
                                                    &lt;div aria-labelledby="mj-column-px-20" class="mj-column-px-20" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"&gt;
                                                      &lt;table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0"&gt;
                                                        &lt;tbody&gt;
                                                        &lt;/tbody&gt;
                                                      &lt;/table&gt;
                                                    &lt;/div&gt;
  
                                                  &lt;!--[if mso | IE]&gt;
                                                  &lt;/td&gt;
                                                &lt;/tr&gt;
                                              &lt;/table&gt;
                                              &lt;![endif]--&gt;
  
                                            &lt;/td&gt;
                                          &lt;/tr&gt;
                                        &lt;/tbody&gt;
                                      &lt;/table&gt;
                                    
                                      &lt;!--[if mso | IE]&gt;
                                      &lt;/v:textbox&gt;
                                      &lt;/v:rect&gt;
                                      &lt;![endif]--&gt;
                                    
                                    &lt;/div&gt;
                                  &lt;/td&gt;
                                &lt;/tr&gt;
                              &lt;/tbody&gt;
                            &lt;/table&gt;
                          &lt;/div&gt;
                        
                        &lt;!--[if mso | IE]&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/table&gt;
                    &lt;![endif]--&gt;
  
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          
        &lt;!--[if mso | IE]&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;![endif]--&gt;
        
    &lt;!--[if mso | IE]&gt;
    &lt;table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;"&gt;
      &lt;tr&gt;
        &lt;td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"&gt;
        &lt;![endif]--&gt;
  
          &lt;div class="mobile-space" style="font-size:1px;line-height:30px;"&gt;&amp;nbsp;&lt;/div&gt;
  
        &lt;!--[if mso | IE]&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;![endif]--&gt;
  
  
  
    ...I can't put the complete code on my post to be under 30000 signs.
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;    </code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for helping,</p>