CMS Development

craigrector
Member

Email module alignment

I'm creating an email where each section of the email will alternate text on one side and an image on the other (example: section 1 will have text on the left and an image on the right, then section 2 will have the image on the left and text on the right, and so on). The issue is that I need it to stack image on top and text below for every section on a mobile device. This means when coded, all images need to be first (on top or table natively aligning to left) and all text after the image (on bottom, or table natively aligned to the right). When I custom code this in html on all sections where the image is aligned to the right and text to the left I use align left or right on the parent table the image or text is in to make it visually alternate sides when viewing on a desktop. Then when it stacks for mobile everything is stacked the way it should.

 

I am having trouble doing this with the modules. Anyone know how to tell a module templated on the left to align visually to the right, etc?

 

Thanks!

0 Upvotes
2 Replies 2
ndwilliams3
Key Advisor

Email module alignment

Email has limit CSS support across email clients. On a webpage, float left and right can accomplish this, but float is not supported in Outlook. Here an article i found on a possible solution.

 

https://www.campaignmonitor.com/blog/email-marketing/2014/10/order-stacked-columns-responsive-email/

 

 

 

craigrector
Member

Email module alignment

Hi ndwilliams3,

 

Thanks for the reply. I am actually very familiar how to create the type of alignment I want building out the html myself. But I am not able to get the same element style declarations to work when building the email only using the module system within Hubspot. I can always "Copy to File" then edit the code directly, I was just hoping for a native solution using just modules without having to do that.

 

Any thoughts on that?