In contrast to sections the columns do not stack because they are assigned a fixed width which together results in 100% width. The resulting markup looks something like this: This happens because an AST is created based on the markup and each tag renders itself and only inserts the markup of the rendered child nodes in the correct places. Why automatic columns of the same height are currently not possibleĬurrently, mjml-column tags are rendered in the same way whether they are in a section or group. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. The following MJML code creates the following mail with columns not of the same height: The approach does not work at all with dynamically generated mails consisting of e.g. Additionally it is not guaranteed that the height specification will work everywhere because the different operating systems render fonts slightly different and therefore different line breaks and text heights could occur. This is feasible for one-time mailings created by a programmer/designer, but it’s a very complex thing because the slightest text change requires new height values. There are many variations of this requirement, but in the end it is always about making two columns ( mj-column) the same height for different aspects of styling (background colors, background images, common alignment lines, …).Ĭurrently, the problem can only be solved by assigning the same fixed height to each column. This is a simple example of what we want to achieve:
Content should be responsive in mails, but the mj-group tag allows you to prevent stacking if certain content should really be displayed side by side. A common problem in email design (and web) design is to have content of the same height standing side by side.
0 kommentar(er)
