Context
Navigation Item Navigation Item Navigation Item Navigation Item Navigation Item
Section Title  
1   2   3
Section Title  
1   2   3
Section Title  
1   2   3

This email was sent by: Your Company Here
4822 West 62nd Street Mission, KS 66205

Preferences | Unsubscribe

With Title Sections

A grid block with title that reflows as appropriate as the screen size shrinks.

            
                        <style>
	/* Gridblock with Title Sections Pattern CSS */
	@media only screen and (max-width: 500px) {
        table[class="pattern"] table { width: 100%; }
        table[class="pattern"] .spacer { display: none; }
        table[class="pattern"] .section-title,
        table[class="pattern"] .section-row {
            display: block;
            height: auto;
        }
        table[class="pattern"] .section-title {
            width: 100%;
            padding: 20px 0;
            margin-bottom: 8px;
        }
        table[class="pattern"] .section-row { width: 100%; }
        table[class="pattern"] .section-row .section {
            display: block;
            float: left;
            width: 32%;
            height: auto;
            margin-left: 2%;
            padding: 60px 20px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
	}
    @media only screen and (max-width: 400px) {
        table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
        table[class="pattern"] .section-row .section {
            float: none;
            width: 100%;
            margin: 0 0 8px 0;
        }
    }
</style>

<table cellpadding="0" cellspacing="0" class="pattern" width="100%">
    <tr>
        <td class="grid-block" width="600" style="padding-bottom: 8px;">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td class="section-title" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                        Section Title
                    </td>
                    <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
                    <td class="section-row" width="450">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                                    1
                                </td>
                                <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
                                <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                                    2
                                </td>
                                <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
                                <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                                    3
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="grid-block" width="600" style="padding-bottom: 8px;">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td class="section-title" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                        Section Title
                    </td>
                    <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
                    <td class="section-row" width="450">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                                    1
                                </td>
                                <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
                                <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                                    2
                                </td>
                                <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
                                <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                                    3
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="grid-block" width="600" style="padding-bottom: 8px;">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td class="section-title" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                        Section Title
                    </td>
                    <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
                    <td class="section-row" width="450">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                                    1
                                </td>
                                <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
                                <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                                    2
                                </td>
                                <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
                                <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
                                    3
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>