Rearrange columns to optimize html email layout for mobile devices

I'm currently trying to figure out a way to display 3 columns in a table row, but hide either the first or last column depending on whether it's being viewed on mobile or desktop. Initially, I thought about adding an extra TD at the bottom and using CSS media queries to hide one of the columns, but that approach didn't work as smoothly as I had hoped.

The desktop view should show alternating images:

https://i.sstatic.net/wIhxL.png

For the mobile view, I need the image with the lady wearing a graduation hat to be displayed above the "What is a beneficiary" grey box.

https://i.sstatic.net/07BcK.png

<table border="0" cellpadding="0" cellspacing="0" width="100%">
       <tr align="center" valign="middle">
          <td align="center" width="50%" class="column" valign="top" style="text-align:left; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#44464a; line-height:1.4; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;">    <img class="person" src="c29229/c29229_4seasons_photos_2.jpg" alt="photo of people" style="width:300; height:auto; border:0 none; display:block;" />    </td>
          <td align="center" valign="middle" width="50%" class="column" style="text-align:center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#ffffff; line-height:1.4; padding-top:0px; padding-right:30px; padding-bottom:0px; padding-left:30px; background-color: #ab811d;">
             <h2 style="text-align:center; font-weight: normal !important; font-size: 24px; color:#ffffff; margin-bottom: 20px !important;">
                <div class="spacer" style="padding-top: 40px; display:none;">&nbsp;</div>
                Complete your beneficiary designation
             </h2>
             <p style="margin-bottom:0px;"><a href="#" style="color:#ffffff; text-decoration:underline;">Vea esta correo electr&oacute;nico en&nbsp;espa&ntilde;ol</a></p>
          </td>
       </tr>
    </table>
htmlcssresponsive-designhtml-email

Answer №1

To achieve full email client coverage without relying on media queries, you can utilize the dir attribute along with max-width for specifying the order of <td> elements.

Begin by structuring each table row with a mobile-first approach: place the image in the first <td> and the text in the second one. Due to the source order, the stacked layers will always display the image above the text. As the column widths exceed their specified max-width, they will automatically stack without requiring any media queries.

This method resolves issues for mobile devices, but how do you ensure certain images show up in the correct column on desktops? This is where the dir attribute comes into play. By adding dir=rtl to the parent <td>, the contained elements will be displayed in reverse order, ensuring the last column appears first.

Below is an example demonstrating this technique:

<tr>
    <!-- Using dir=rtl triggers the layout change. To reverse the alignment on wider screens while maintaining stacking on narrow ones, dir=ltr can be used instead. -->
    <td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
        <!--[if mso]>
        <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
        <tr>
        <td align="center" valign="top" width="600">
        <![endif]-->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
            <tr>
                <td align="center" valign="top" style="font-size:0; padding: 0;">
                    <!--[if mso]>
                    <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
                    <tr>
                    <td align="left" valign="top" width="300">
                    <![endif]-->
                    <div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
                                    <img src="http://placehold.it/200" width="300" height="" border="0" alt="" style="width: 100%; max-width: 300px; height: auto;">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </td>
                    <td align="left" valign="top" width="300">
                    <![endif]-->
                    <div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                                <td dir="ltr"> <!-- Make sure to switch dir to ltr here to prevent text from displaying in reverse -->
                                Text Goes Here
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
        </table>
        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

By structuring each <tr> as shown, with the image in the first column, you can easily swap the columns' order within each row by including a dir=rtl in the parent <td>.

Answer №2

Email clients can be quite finicky when it comes to handling CSS styling.

To customize the order of elements on mobile, you can use the following code snippet for desktop displays:

position: relative;
left: -50%;

The specific code adjustments needed may vary depending on how your layout switches between a two-column and one-column setup.

Fortunately, most modern email programs now support flexbox, allowing you to easily re-order elements with properties like order or by changing the direction to row-reverse.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I align the logo in the center of a ul

Many have attempted to resolve this issue, creating makeshift solutions or simply settling for an outcome that just "gets by." But what is the optimal approach? I have nearly finished something, yet for some reason, the logo isn't centered, rather the ...

htmlcssnavigation

What causes the background-color:attribute to malfunction when there are comments in the preceding line?

Recently, while testing internal stylesheets in the latest version of Chrome, I encountered a peculiar bug that caused my code to break. Strangely enough, any comments placed before background-color:rgb(51,51,51) seemed to trigger the failure of the code. ...

htmlcssstylescomments

What is the best way to align a card-body to the right for screen sizes larger than 1280 using Bootstrap

I'm having trouble getting the float classes to work on my Bootstrap cards. Specifically, I want to float a card-img left and the card-body right using Bootstrap cards, but it's not behaving as expected. Can someone provide some insight into what ...

cssbootstrap-4

Is it just me, or does `position: fixed;` not actually fix the element to the top?

I'm experiencing an issue where the element isn't fixed to the top of the page, despite using the position: fixed; property. I've tried several solutions including: Setting a z-index of 9999 Wrapping all elements in a single container (.fi ...

htmlcss

CSS inline block is failing to create a new line

Hey there, I'm trying to create this webpage but I'm encountering an issue. I'm using the inline-block property, but it's not creating a new line; instead, everything is just staying in a straight line. I need it to move to a new line o ...

htmlcss

What is the best way to create separation between the href attribute of an a tag and the

Currently, I am utilizing Material UI in React and encountering an issue with the spacing between an <a tag and some text both before and after it. The lack of space is causing them to merge together. <Typography style={{ fontSize: 14, textAlig ...

cssreactjsmaterial-ui

Experiencing the appearance of a scroll bar upon adjusting the padding of mat-dialog-container to 0

One issue I encountered was with a Dialog Box that has a blue top Bar using the mat-dialog class and styling from the mat-dialog-container. The default style of the mat-dialog-container was causing some problems before, but I managed to solve it by creatin ...

cssangular-material

Is the table scrollable within the tbody tag?

Is it possible to create a table with a scrollbar on the right side using only CSS and without any plugins like jQuery? Additionally, I want the table header to remain fixed in place. What steps do I need to take to achieve this functionality? ...

htmlcssscroll

QWebEngineView - handling content larger than 2 megabytes

While working with PyQt5's QWebEngineView, I encountered a 2 MB size limitation when using the .setHTML and .setContent methods. After researching potential solutions, I came across two approaches: One option is to use SimpleHTTPServer to serve the f ...

htmlqtpyqt5qwebengineview

Performing a while loop to iterate through the data for the second

After spending hours on this code and consulting a friend, we are both stuck trying to find a solution. We are working on a script that displays reviews based on descending IDs pulled from a database. The script implements an endless scroll feature to el ...

phphtmlajaxwhile-loop

How to Align React Material UI Grid with Varying Row Counts in Each Column

Objective My goal is to design a component that showcases details about a device, including an icon and its current status. For instance: https://i.sstatic.net/UhpnG.png Approach I've Taken I am attempting to accomplish this by structuring a MUI Gr ...

htmlcssreactjsmaterial-ui

Create a bookmark system on an HTML page by utilizing the existing heading tags and implementing Javascript

Looking to implement a bookmark system using the headings within my HTML document, based on heading hierarchy. Unfortunately, my attempts have not been successful so far. https://i.stack.imgur.com/CdXjw.png I envision my bookmarks looking something like t ...

javascripthtmlcss

Dropdown list feature in Ajax not functioning properly

Currently, I am developing a dynamic website that allows users to search for doctors based on location and specialty. You can see an example of how it works here: https://i.sstatic.net/uQEjS.png Below is the main code for my homepage: index.php <scri ...

phphtmlmysqlajax

Stop vuetify from cluttering the global style scope

Seeking to embed a Vue component into another from an external source without using a Vue Plugin. The components are mounting correctly, but the embedded component's use of Vuetify is affecting the parent application's style. Visual examples can ...

cssvue.jswebpackvuetify.js

Customizing textarea maxLength for various languages: A comprehensive guide

My form includes a textarea that allows users to input text in either English, Chinese, or both languages. The maxLength="50" attribute works well for limiting English characters, but I need to restrict Chinese characters to only 20. Furthermore, if the ...

javascripthtml

Arrange the div elements in a single horizontal line

Is there a way to align the company logo div next to the name, address, email, and phone number containers? I've attempted using display: inline and float: right, but the logo isn't moving up as desired. Here's the code snippet: http://jsfi ...

javascriptjqueryhtmlcss

Retrieve the current value of an item by scrolling through it

I have a functioning sample of a scrollable with item numbers 1 - 24. I am trying to retrieve the value of the current item, but my attempts to use alert have failed. How can this be achieved? Here is my code: UPDATE QUESTION: I managed to obtain the inde ...

jquerycssjquery-uijquery-plugins

Issues with scrolling, styling in css, and Vue challenges

I'm a beginner in this topic, currently working with Vue and CSS. I've managed to create a responsive menu, but I'm facing difficulty in implementing scroll only for the drop-down menu. The issue I'm encountering is that when I scroll, ...

cssvue.js

Tips for overlapping children in a column flex direction while maintaining the parents' positioning

Currently, I am working with two parent flex items, arranged with flex-direction: column. Within the first parent, there are two children. However, one of the children is optional and may be removed at times. I aim to have the optional child displayed on ...

javascripthtmlcssflexbox

What is preventing the div container from extending to its full width?

The content on the right side of this div container is struggling to reach full width for some unknown reason. Click here to see an image of the issue. The right column is not extending to full width. This snippet shows my CSS code. The 'main-conte ...

htmlcsscontainersalignmentwidth