Skip to content

mj-column improperly stacking (ignoring width) on Desktop Gmail, Outlook (new), and various EU clients #3041

@cbaiia

Description

@cbaiia

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.

Image

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions