# Email layout alignment

**URL:** <https://community.hubspot.com/t/email-layout-alignment/57219>\
**Category:** Email Marketing Tool\
**Created:** [May 18, 2022, 3:36pm UTC](https://community.hubspot.com/t/email-layout-alignment/57219 "2022-05-18T15:36:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![FDia](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@FDia](https://community.hubspot.com/u/FDia)\
**Post date:** [May 18, 2022, 3:36pm UTC](https://community.hubspot.com/t/email-layout-alignment/57219/1 "2022-05-18T15:36:56Z")

</div>

Hi there,  
I have been trying to copy an existing one-pager into the drag & drop Hubspot email marketing tool. Unfortunately, I have encountered two problems:

1. The different text and image elements can’t be aligned properly and shift as soon as the test email is sent out. Is there a way of having a grid view or automatic guidelines to align different elements of an email?
2. Even if the layout were to be done, it is only visible on the web layout. The smartphone layout shifts the entire email design. How can I make sure that the smartphone version is the same as the web version?

These problems lead me to the question of whether there is an extension or tool that helps with this kind of design problems if one is to create an email layout more complex than just a top-to-bottom text.

Thank you in advance for your help - it is very much needed!

---

<div class="post-metadata">

**Author:** ![Ben\_M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ben_m/32/2679_2.png) [@Ben\_M](https://community.hubspot.com/u/Ben_M)\
**Post date:** [May 19, 2022, 12:48pm UTC](https://community.hubspot.com/t/email-layout-alignment/57219/2 "2022-05-19T12:48:29Z")

</div>

Email is unfortunately a much more complex beast than web design of landing/web pages. Would you be able to share some images for us to see the layout you are trying to replicate and even the “view online” link from your test email so we can see what is happening when it is rendered. This will allow us to provide some insights to help guide you to a solution.

---

<div class="post-metadata">

**Author:** ![FDia](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@FDia](https://community.hubspot.com/u/FDia)\
**Post date:** [May 20, 2022, 7:43am UTC](https://community.hubspot.com/t/email-layout-alignment/57219/3 "2022-05-20T07:43:39Z")

</div>

Hi Ben, thank you for your reply. I have created a simplified version without the copy for confidentiality reasons.  
Here is the test email: [https://drive.google.com/file/d/1gkFDxW5xMu5qmw08ij2FVGh8K3AhLvrr/view?usp=sharing](https://drive.google.com/file/d/1gkFDxW5xMu5qmw08ij2FVGh8K3AhLvrr/view?usp=sharing)

Here is how the web layout looks (as you can see, the section titles and text blocks are not well-aligned):

 ![Bildschirmfoto 2022-05-20 um 07.36.37.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/1/61f31cf0cf625200754acc46d7eb213a73df9315.png)

Here is how the smartphone version looks:

 ![Bildschirmfoto 2022-05-20 um 07.35.14.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/e/ae86b48d581906ec7673cbe35f3cec189f8aca78.png)

---

<div class="post-metadata">

**Author:** ![Ben\_M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ben_m/32/2679_2.png) [@Ben\_M](https://community.hubspot.com/u/Ben_M)\
**Post date:** [May 20, 2022, 1:00pm UTC](https://community.hubspot.com/t/email-layout-alignment/57219/4 "2022-05-20T13:00:55Z")

</div>

What it looks like is going on is that you are using the layouts and then on mobile everything is condensing to a single column. Try using a 1 column layout and then drag text areas or images next to one another in that layout instead of using the layouts feature.