Hola! ¡Tenemos nuestra Comunidad en Español!

Mobile Stacking Order in Drag and Drop Email Template

New Member

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.).

 

normal view alternating copy & imagess.pngtablet / 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 view - not stacking correctly.pngmobile view - images not stacking first

 

I tried using this article to help me with code to create a mobile stacking order (https://designers.hubspot.com/docs/snippets/responsive/how-to-customize-your-mobile-stacking-order). As I couldn't see how to attach a css file, I added to code to the head markup in the email template:

 

head markup including stacking code.pngadding code from HS article to head markup

and added the css classes to the modules:

 

adding css classes to the modules.pngcss classes in modules

It's not working and as a marketer, not a developer, I'm out of my depth now. Can anyone help me resolve the issue please?

 

Many thanks,

 

N

Reply
0 Upvotes
1 Reply
Highlighted
Regular Advisor

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 Cat Sad

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!