-
Notifications
You must be signed in to change notification settings - Fork 983
Open
Description
Describe the bug
mj-column elements are unexpectedly stacking (appearing as 100% width blocks) on desktop environments where they should be side-by-side. This is occurring even when the viewport is well above the mobile breakpoint.
This is not limited to the known Outlook rendering issues; it is affecting standard web clients on desktop including Gmail.com, as well as regional providers like Web.de, free.fr, and t-online.
Steps to reproduce the behavior:
Create a file with a standard multi-column layout:
<mjml>
<mj-body>
<mj-section>
<mj-column width="30%">
<mj-image src="[https://via.placeholder.com/150"](https://via.placeholder.com/150%22) />
</mj-column>
<mj-column width="70%">
<mj-text>
This text should be next to the image, but it stacks below it.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
- Render to HTML.
- Send to a test address on Gmail.com, Web.de, or the New Outlook.
- Open on a Desktop Browser (Chrome/Edge/Firefox).
- See error: Columns are stacked vertically instead of displaying horizontally.
Expected behavior
Columns should respect their percentage widths (30%/70%) and display side-by-side on desktop viewports, only stacking when the viewport drops below the defined breakpoint (default 480px).
MJML environment: - OS: Windows / MacOS
- MJML Version: Bundled Version (likely 4.x)
- MJML Tool: [VS Code Extension]
Email sending environment: - Platform used: Salesforce Marketing Cloud
Affected email clients: - Gmail (Desktop Web)
- New Outlook (Windows & Web)
- Web.de (Desktop Web)
- free.fr (Desktop Web)
- t-online (Desktop Web)
Screenshots
Additional context
The issue persists regardless of standard troubleshooting (checking media queries, verifying HTML syntax). It appears that the rendering engine in these clients is failing to apply the inline-block width calculations, forcing a fallback to mobile (stacked) layout across the board.
Metadata
Metadata
Assignees
Labels
No labels

