Rearranging Information for Optimal Mobile Viewing

I am in the process of designing an HTML email template, and I am working on ensuring its compatibility with mobile devices. Currently, I have arranged an image, followed by text and a button, but my goal is to switch the order for mobile displays so that the image appears first, followed by the text and button.

Link to the code snippet

<table cellpadding="0" cellspacing="0" width="100%" role="presentation" class="stylingblock-content-wrapper" style="background-color: #ffffff; ">
  <tbody><tr>
    <td style="padding: 0px 50px 20px;background-color: #ffffff; " class="stylingblock-content-wrapper camarker-inner">
      <table cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;">
        <tbody>
          <tr>
            <td valign="top" class="responsive-td" style="width: 50%; padding-left: 0px;padding-top:0px;">
              <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; max-width:600px;" class="stylingblock-content-wrapper">
                <tbody>
                  <tr>
                    <td style="padding: 10px 10px 20px 0px;" class="stylingblock-content-wrapper camarker-inner">
                      <div style="color: #000000; font-family:Helvetica, Verdana, Sans-Serif, Arial; font-style: normal; font-weight: normal; line-height: 100%; text-align: left;">
                        <span style="font-family: Helvetica, Verdana, Sans-Serif, Arial; font-size: 21px; line-height:120%;">
                          <b>yhtyr urye jytrj utrjutyj uyk yu kuy uyk iykiy kiuyk uyjuyjku yjk uyk uyk uy kuyk uy</b>
                          <br>
                          <br>
                          <span style="font-family: Helvetica, Verdana, Sans-Serif, Arial; font-size: 15px; line-height:22px;">hgfdjdf jdf jhgfjhg jgfhjghkj futjk jgufjmgh kjghjk ghjk hjkjhk gh kjh gkjhk jhgk jhk hjk jghk  kgjh k jhgk jhgk jhk yuykuyk ufkuyk uyf ukfkfukufk ufk uf kufk uf kfu </span>
                        </span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td align="center" role="presentation" valign="middle" class="innertd buttonblock" style="border-radius: 50px; cursor: auto; mso-padding-alt: 10px 25px;  background: #ffae00; -moz-border-radius: 50px; -webkit-border-radius: 50px; color: #000000;">
                      <a align="center" target="_blank" id="button" class="buttonstyles" style="display: block; color: #000000; font-family:Helvetica, Verdana, Sans-Serif, Arial; font-size: 16px; line-height: 140%; font-weight: normal; margin: 0px; text-decoration: none; text-transform: none; mso-padding-alt: 0px; text-align: center; padding: 5px 25px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;" href="" title=" button" data-linkto="https://">button</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td valign="middle" class="responsive-td" style="width: 50%;  padding-right: 0px;  background-color: transparent;">
              <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: transparent; min-width: 100%;" class="stylingblock-content-wrapper">
                <tbody>
                  <tr>
                    <td align="center" style="padding-top:20px;padding-bottom: 10px;">
                      <img src="https://cdn2.iconfinder.com/data/icons/web-and-mobile-ui-volume-15-1/48/718-512.png" alt="Icon" width="200" style="display: block; padding: 0px 0px 0px 0px; text-align: center; width: 220px; border: 0px;">
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr></tbody>
</table>

Can anyone provide assistance on achieving this? Thank you!

I have attempted restructuring the HTML layout, but I have not obtained the desired outcome.

htmlcssemailhtml-email

Answer №1

To create a different flow for your stack, you can utilize the trick of using the "dir=rtl" attribute. This method involves changing the direction of the table structure to make the stack flow in the opposite direction. However, within that table, you can switch the direction back to "ltr" so that it remains readable. This way, the change in direction is isolated to the structure itself.

  1. In the outer <td>, add dir="rtl"
  2. In the inner <tables> with content, add dir="ltr"
  3. Reorder the content in the HTML so that the circle appears first (which will be displayed last on desktop at dir="rtl")

For an example, check out: https://jsfiddle.net/y7uf8nzL/

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 Chinese characters be transformed into XML/HTML-style numerical entities and converted into Unicode UTF-8 encoding?

I have a situation where I need to change a text that contains both English words and Chinese characters into a format that includes XML/HTML-style numerical entities for the Chinese characters. Here's an example of the original text: Title: 目录. ...

pythonhtmlxmlregexcharacter-encoding

Bootstrap causing issues with correct display of div element

I'm having trouble getting my divs to display on the same row. It seems like when I have 2 rows, the button is positioned correctly. However, with only one row, the button ends up on the second row. Here is the current layout: https://i.sstatic.net/L ...

htmlangularbootstrap-4

Adjust choices in a dropdown menu based on the selection of another dropdown menu

I am attempting to create a scenario where selecting an option from one dropdown list will dynamically change the options available in the next dropdown list. You can find my code on jsfiddle <!DOCTYPE html> <html> <body> &l ...

javascripthtml

My Tailwind CSS toggle button disappears in dark mode, why is that happening?

<button aria-label="Toggle Dark Mode" type="button" className="lg:inline-flex lg:w-40 md:w-screen p-3 h-12 w-12 order-2 md:order-3" onClick={() => setTheme(theme === 'dark' ? &ap ...

javascripthtmlreactjsnext.jstailwind-css

Issues with CSS hovering effects

this is my unique code snippet CSS Stylesheet .Navigation-signIn { background-color: #c8db5a; } .Navigation-signIn։hover { background-color: #ffffff; } JSX Component import { NavLink } from "react-router-dom"; import { BrowserRouter } fro ...

cssreactjs

Customize your dropdown menu options with JQuery: A step-by-step guide

I am dealing with a situation where I have a dropdown menu labeled as Code. The options available in this dropdown are fetched from a database, populating the dropdown accordingly. Alongside the Code dropdown, there is a textbox named Name. Under certain c ...

javascriptjqueryhtmldrop-down-menu

Turbolinks not allowing the addition of JavaScript classes for background images

While trying to merge a front end html theme with my Laravel app, I encountered an issue with turbolinks that is preventing Javascript from appending div classes. This is resulting in background images only being displayed on page refresh. <div class= ...

javascriptcsslaravelturbolinks

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

javascripthtmlcssmicrosoft-edge

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Currently in the development phase of my epubReader app. Utilizing CSS to customize the font style within UIWebView, however encountering a challenge with the fixed font size causing fluctuations in the number of pages when changing the font style. Seeki ...

javascripthtmlioscssxhtml

Having trouble with HTML on Eclipse for Android development?

There seems to be an issue with the HTML code in this program. When attempting to use x or any other HTML code, it does not format correctly. This is unusual as HTML has worked in the past. The problem occurs with the first string array and not with the ...

javaandroidhtmleclipse

The $.post method is malfunctioning

I am experiencing an issue where the onchange function is working properly, but the $.post function is not functioning as expected. Below is the HTML code snippet: <input type="checkbox" id="chk" value="3" onchange="checkradio(this.value)"/> Here ...

javascriptphphtmlajax

Discover the magic of unlocking XML content with the power of XSL!

Hello, I am currently working on transforming an XML archive using an XSL archive. My goal is to generate a table displaying the content of the XML, but I am encountering difficulties in showing the values of two columns named "complexity" and "subject". B ...

htmlxmlxslt

Integrate a Google Maps API Javascript into a Flex application

I'm trying to incorporate a Google Maps API JavaScript into my Flex Application, but I have been unsuccessful so far despite looking at various examples. If anyone has any tips or guidance on how to achieve this, I would be extremely grateful for you ...

htmlactionscript-3apache-flexgoogle-maps-api-3dhtml

Setting div HTML as an attribute in jQuery

I am facing an issue with assigning a div content (barcode) from my database as an attribute to my select option. Whenever I assign it, the option ends up getting distorted. Can anyone provide some guidance on how I can achieve this successfully? I have al ...

javascripthtmljquery

The <a> element does not direct to a different webpage

I designed a single-page layout with multiple sections and added links to the navigation bar for easy access. I also incorporated jQuery for smooth scrolling within the page. However, when I tried linking to other pages, it didn't work properly until ...

jqueryhtml

Positioned footer without predetermined height

I am having trouble with positioning the footer so that it always stays at the bottom of the page. When there is not enough content on the page, the footer does not reach the bottom as desired. Additionally, the footer does not have a fixed height. Below i ...

javascripthtmlcsstwitter-bootstrap-3

What is the reason behind every element in bootstrap being enclosed within an anchor tag?

I am currently delving into the world of bootstrap for the first time and encountering an issue with the grid system. Somehow, whenever I try to incorporate an - a href="#" - tag within the grid, it distorts the layout inexplicably. I have been struggling ...

phphtmlbootstrap-grid

Hide the 1, 2, 3 page buttons in Datatables pagination and instead display only the Next and Previous buttons for navigation

I recently implemented datadables.net pagination for my HTML table. I am looking to customize the pagination buttons by hiding or removing the 1, 2, 3 ... buttons and only display Next and Previous Buttons. Is there a way to achieve this by setting paging ...

javascriptjqueryhtmlpaginationdatatables

What causes a block element to not stretch to match the width of its parent when it is in a fixed position?

I am currently developing a fixed horizontal navigation bar that spans the entire width of the screen. However, when I attempt to make its position fixed, the unordered list element only occupies the width required to contain its content. Considering that ...

htmlcss

What allows me to modify the border color and thickness of my table's <thead>, but prohibits me from changing the background color?

I have successfully changed the border styling of the top bar in the table, however, I am struggling to change the background color no matter what I try. Can someone point out where I might be making a mistake? Here is my code: <table> <thead> ...

htmlcss