Crafting a good email copy is not an easy thing and is time-consuming. Let's pretend you have been working for hours to sort content out, and in the end, you've noticed that those containers are not vertically aligned as supposed.
Like in this sample:
As you can see, these containers look strange, as the first one is longer and the second one is shorter. The buttons are not on the same level.
Do not worry we will show you how to fix it with vertical alignment, and good thing we have even 3 options on how to do it.
Option №1:
Use the spacer block for the vertical alignment.
Let's drag and drop the spacer block under our text block;
Switch the spacer mode to "Spacer Mode";
Stretch to the needed height;
Done! Now our two containers are on the same level.
Option №2:
Fix the container's height via the tools editor:
Click on the desired block to which you want to set the height (it could be a text block or button block) and add the needed height to it;
Important to note: you can find out the height of each element via dev tools.
I'm going back to our case, so I want to check the height of this first description block.
How to do that? Easy, go to the preview mode, and open the dev tools. To do that, press the F12 button on the keyboard.
Hover the mouse over the desired block, and you will see the block's height.
Now you know why I set exactly 107 pixels to the second container.
To align the text in the second container to the top, please click on the "Alignment" menu → "Top".
Option №3:
Use paddings for the text block.
Click on the text block and add paddings from the top and bottom;
Done! Great job, our containers are on the same level now.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.