Let's image the situation. You are working on your email template and want to fill it with the product cards.

You added these product cards to the email template and see that containers are not vertically-aligned as supposed.

Please see our example:

As you can see these containers look strange, as the first one is longer and the second one is shorter. The prices and buttons are not on the same level.

I have good news, we can fix it and apply the vertical-alignment for the containers.

We have 2 options how to do that:

Option №1:

Use the spacer block for the vertical-alignment.

  • Let's drag-and-drop the spacer block under our text block;

  • turn on the "Dynamic spacer" control and stretch the spacer to the desired height;

  • done! Now our two containers on the same level.

Option №2:

Fix the container's height via the code editor .

  • Click on the desired block to which you want to set the height (in our case, I want to set the height for the block with the description) and open the code editor;

  • add height="189" to the code, you can replace the number in brackets with your own;

Please be advised, you can found out the height of each element via dev tools.

I'm going to 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, 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 189 pixels to the second container.

  • to align the text to the top, add valign="top" to the code;

  • done, here is our result.

If you have any questions, please email us at support@stripo.email.

Have a great day:)

Did this answer your question?