0

How can I align these tables to centered when it hits mobile?

I need to do this without media queries to support the Gmail mobile app.

The HTML code is from an actionrocket codepen, but i don't know what will make the tables centered on mobile with breaking the desktop view

http://codepen.io/actionrocket/pen/EoCLH

        <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed"> 
        <tr>
            <td>

            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style=" display:block; max-width:640px !important;" bgcolor="#ffffff">
            <tr>
                <td>

                <table id="holder" class="wrapper" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:640px !important;" align="center">
                <tr><td align="center">
                <!--[if mso]>
                    <table id="outlookholder" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td>
                <![endif]-->
                <!--[if (IE)]>
                    <table border="0" cellspacing="0" cellpadding="0" width="640" align="center"><tr><td>
                <![endif]-->  


                <!--2 column-->
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                    <table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
                        <tr>
                        <td width="20"></td>
                        <td width="280" bgcolor="#ededed">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="2%"></td>  
                            <td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
                            <td width="2%"></td> 
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="2%"></td> 
                            <td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
                            <td width="2%"></td> 
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td align="center">
                            <table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
                                <tr>
                                    <td width="15"></td>
                                    <td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="100%" height="10"></td>
                                    </tr>
                                    </table>
                                    <a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="100%" height="10"></td>
                                    </tr>
                                    </table>
                                    </td>
                                    <td width="15"></td>
                                </tr>
                                </table>
                            </td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20" bgcolor="#ffffff"></td>
                            </tr>
                        </table>
                        </td>
                        <td width="20"></td>
                        </tr>
                    </table>
                    <!--[if mso]></td><td><![endif]-->
                    <table width="320" border="0" cellspacing="0" cellpadding="0" >
                        <tr>
                        <td width="20"></td>
                        <td width="280" bgcolor="#ededed">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="2%"></td> 
                            <td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
                            <td width="2%"></td> 
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="2%"></td> 
                            <td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
                            <td width="2%"></td> 
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td align="center">
                            <table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
                                <tr>
                                    <td width="15"></td>
                                    <td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="100%" height="10"></td>
                                    </tr>
                                    </table>
                                    <a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="100%" height="10"></td>
                                    </tr>
                                    </table>
                                    </td>
                                    <td width="15"></td>
                                </tr>
                                </table>
                            </td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        </td>
                        <td width="20"></td>
                        </tr>
                    </table>

                    </td>
                </tr>
                </table>    




                    </td></tr></table>
                <!--[if mso]>
                    </td></tr></table>
                <![endif]-->
                <!--[if IE]>
                    </td></tr></table>
                <![endif]-->



        </td></tr></table>
        </td></tr></table>
halfer
  • 19,824
  • 17
  • 99
  • 186
Michael Wilson
  • 1,548
  • 3
  • 21
  • 44
  • Can you use [ZURB Foundation for e-mails](http://zurb.com/ink/docs.php)? – Knut Holm Dec 10 '15 at 11:54
  • I was using it until I found out their grid does not support the Gmail mobile app – Michael Wilson Dec 10 '15 at 11:56
  • How did you discover it? They have Gmail mobile app in their [supported clients](http://zurb.com/ink/docs.php#compatibility). – Knut Holm Dec 10 '15 at 11:59
  • They use media queries which aren't supported by Gmail mobile app. https://litmus.com/help/email-clients/media-query-support/ – Michael Wilson Dec 10 '15 at 12:03
  • http://foundation.zurb.com/forum/posts/24554-ink---block-grid-not-stacking-in-gmail-app – Michael Wilson Dec 10 '15 at 12:03
  • 2
    please check in mobile: http://codepen.io/anon/pen/NxqXex – yjs Dec 10 '15 at 12:04
  • @Michael Wilson Hmm it's weird. Quotation from their doc for Gmail mobile app: "Does not fully support the Ink [grid](http://zurb.com/ink/docs.php#grid). Responsive layouts should be accomplished using the [block-grid](http://zurb.com/ink/docs.php#gmail)." – Knut Holm Dec 10 '15 at 12:05
  • Yeah that looks to be working!!! @yjs – Michael Wilson Dec 10 '15 at 12:05
  • @yjs I later discovered this will not work for me, as in all outlook clients you can't get rid of the bullet points from the ```
      ```
     – Michael Wilson Dec 11 '15 at 13:47
  • modified, removed bullets from list items rather than list..http://codepen.io/anon/pen/NxqXex Currently i have no oe installed in machine..plz chk from ur end. – yjs Dec 12 '15 at 07:50
  • sorry still doen't work, see this http://stackoverflow.com/questions/7004367/why-doesnt-microsoft-outlook-respect-list-styles-when-sending-html-emails – Michael Wilson Dec 13 '15 at 14:54

2 Answers2

1

Modules with new design

Don't use tables for design

I do not think you should use tables for design, see Why not use tables for layout in HTML? If you are going to use tables, you should use the CSS properties, such as:

display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;

MDN css display

Don't use inline styles

Also I see you are using inline CSS styling. See What's so bad about in-line CSS? Simply, maintaining your code gets really hard and frustrating.

Module solution

I used css-stylesheets (handy thing). In my opinion I have not used any hard to understand css-properties. Positioning is done with text-align center. (inline elements get position centered). Added padding and margin to make thins have a little more space. Used box-sizing: border-box; to maintain size even if I add padding.

width 100px + padding-top: 20px would normally be a size of 120px; with box-sizing you maintain the 100px.

How is this even mobile friendly?

Ah, glad you asked. I use an inline-block element on the module wrapper.
Actually I called the section class for .module. With the inline-block display property the elements wrap. So if there is a lot of width on the page the modules will be displayed next to one another. If there is little they will be displayed under one another.

.module {
  display: inline-block;
  background-color: #ddd;
  width: 300px;
  height: 300px;
  padding-top: 30px;
  box-sizing: border-box;
  font-family: arial;
  text-align: center;
  margin: 5px;
}
.module img {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.module h1 {
  font-weight: normal;
}
.invers {
  border: none;
  background-color: #aaa;
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  cursor: pointer;
}
<div class="wrapper">
  <section class="module">
    <img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
    <h1>Module title goes here</h1>
    <p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
    <button class="invers">Call to Action</button>
  </section>
  <section class="module">
    <img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
    <h1>Module title goes here</h1>
    <p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
    <button class="invers">Call to Action</button>

  </section>
  <br>
  <h1>HERE is what happens if the screen gets small:</h1>
  <section class="module">
    <img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
    <h1>Module title goes here</h1>
    <p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
    <button class="invers">Call to Action</button>
  </section>
  <br>
  <section class="module">
    <img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
    <h1>Module title goes here</h1>
    <p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
    <button class="invers">Call to Action</button>
  </section>
</div>
halfer
  • 19,824
  • 17
  • 99
  • 186
Persijn
  • 14,624
  • 3
  • 43
  • 72
1

You'll struggle to do this for Gmail. Because the containing tables for each column are aligned left you cannot override them to certain. Your best alternative is to force the desktop view for Gmail users or creating the email with Gmail & Outlook in mind and then use CSS with media queries to allow for iOS users.

Lewk
  • 116
  • 7