La fonction de suggestion automatique permet d'affiner rapidement votre recherche en suggérant des correspondances possibles au fur et à mesure de la frappe.
Mobile Stacking Order in Drag and Drop Email Template
Hi community,
I am trying to create an email with multiple content sections. In a non-mobile view, the image and copy in each content section would alternate sides of the screen (i.e. Section 1: Image Left and Copy Right, Section 2: Image Right and Copy Left etc.).
tablet / desktop view - desired alignment
Using the drag and drop email template builder, I have created an email which does this (see above) - except in mobile view (see below).
Mobile Stacking Order in Drag and Drop Email Template
I ran into and solved the same problem today. What worked for me was using CSS media queries with display property values "table-header-group" and "table-footer-group".
For anyone else facing this issue, here's how you can approach it:
Imagine you have this HTML code for your 2-column section in the desktop template located somewhere in the email's <body>:
<div class="row1">
<div class="column1">
Some text here
</div>
<div class="column2">
<img alt="some image here" src="example_path">
</div>
</div>
<div class="row2">
<div class="column2">
<img alt="some image here" src="example_path">
</div>
<div class="column1">
Some text here
</div>
</div>
By default this 2-column section will show in the order
text image
image text
on desktop and
text
image
image
text
on mobile.
To make it show on mobile as
text
image
text
image
add this CSS styling into the <head> section of the template:
Mobile Stacking Order in Drag and Drop Email Template
I've found a workaround, use a two column layout, an empty one column layout, and then another two column layout. You can see how it looks in the editor, in desktop, and in mobile below.
Mobile Stacking Order in Drag and Drop Email Template
Hi Natalia,
Unfortunately email template development's trickier than website development as it's more outdated. The drag and drop modules for webpages use one type of element (divs) whereas emails use nested tables so they behave differently.
The two methods on that link are intended for websites. The first method, Flexbox isn't supported on most email clients and the second method, float, isn't supported on Outlook and I'm not certain how it would work with the drag and drop templates in general as I haven't tested it out.
The most reliable way I've found to achieve this is to create a custom coded module and use the table's "dir" parameter as described here. I'm afraid this means that some HTML/CSS and email template development knowledge is needed.
If it's any consolation, most developers I know also find email templates highly frustrating
Mobile Stacking Order in Drag and Drop Email Template
Is it anywhere on the product roadmap to add a toggle for two coloum modules, or any kind of option for controlling the order? It seems fairly critical to me for most email designs.
Mobile Stacking Order in Drag and Drop Email Template
I found a work around that worked for me. I have an enews with a story that includes an image. I put the image to the right of the copy in the main email creator (see snip below). And then when rendered for the mobile version, they were stacked under the correct story. Maybe this will help y'all!
Mobile Stacking Order in Drag and Drop Email Template
Hey Stephanie, I'm creating an email template under Design Tools with the drag & drop email editor and I'm having this same problem (unable to change the way the blocks stack on mobile). I'm sure other users are having this issue as well. I looked at the article you linked to and the steps didn't work for me unfortunately. Going over the article with a HubSpot support rep we found that the steps don't apply when working with HubL modules because the "dir" variable is not supported. The only theoretical solution we came up with was to convert the email template to HTML, add the "dir='ltr'/dir='rtl'" style tag in-line for every single <table> and <td> element, and even then, after converting the email template to HTML there is still a mix of HTML and HubL code. It would be great if HubSpot updated the drag & drop email editor to give users the ability to easily change the stacking order of their modules on mobile.