Adjust vertical alignment & padding alignment-and-padding
In this example, we will adjust padding and vertical alignment inside a structure component composed of three columns.
-
Select the structure component directly in the email or using the Navigation tree available in the left-hand menu.
-
From the toolbar, click Select a column and choose the one that you want to edit. You can also select it from the structure tree.
The editable parameters for that column are displayed in the Styles tab.
-
Under Alignment, select Top, Middle or Bottom.
-
Under Padding, define the padding for all side.
Select Different padding for each side if you want to fine tune the padding. Click the lock icon to break synchronization.
-
Proceed similarly to adjust the other columns’ alignment and padding.
-
Save your changes.
Manage fragment padding with breadcrumb navigation fragment-padding-breadcrumb
When working with fragments in the Email Designer, you may encounter hidden or residual padding that affects mobile rendering differently than desktop. This is particularly common when fragments have been unlocked or when inheritance has been broken, as leftover styling can remain in the underlying column or text components.
To identify and edit leftover padding in fragments:
-
Use the Navigation tree or click directly on elements in the editor to select each parent structure or column within your fragment. This helps you locate hidden padding or margin that may be specific to mobile devices.
-
After selecting the element in the breadcrumb, navigate to the Styles tab on the right.
-
Review the Padding settings and remove or readjust the padding as needed to achieve correct mobile alignment.
-
If alignment issues persist when reusing fragments, repeat this process for other columns or text components within the fragment.