Reputation: 1579

Align tables to be centered on mobile

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>

Upvotes: 0

Answers (2)

Persijn

Reputation: 14990

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>

Upvotes: 1

Lewk

Reputation: 116

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.