Skip to content

#441218: Email width problem for outlook windows 11 #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mima-bsi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

#441218: Email width problem for outlook windows 11 #70

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35a3c3e
fix: email width problem for outlook windows 11
mima-bsi Dec 12, 2025
0539521
fix: remove the [mso] tag (not necessary)
mima-bsi Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 64 additions & 62 deletions templates/email/_layout.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,70 +67,72 @@
<![endif]-->
</head>
<body vlink="{{visitedLinkColor}}" width="100%" style="margin: 0; padding: 0 !important; word-spacing: normal; mso-line-height-rule: exactly;">
<table role="presentation" class="{{darkModeClassBg}}" style="width: 100%; border: 0; border-spacing: 0; background-color: #ffffff;">
<tr>
<td align="center">
<!--[if mso]>
<table role="presentation" align="center" style="width: {{ layoutWidth }}px;">
<tr>
<td style="padding: 10px 0;">
<![endif]-->
<div class="bsi-header" style="width: 96%; max-width: {{ layoutWidth }}px; margin: 10px auto;">
<table role="presentation" style="width: 100%; border: 0; border-spacing: 0;">
<tr>
<td align="center" style="padding: 0; margin: 0; text-align: center;" data-bsi-dropzone="preheader-dz-fWSCej" data-bsi-dropzone-allowed-elements="header-preheader-cVwk8f logo-TlgUGB" data-bsi-dropzone-max-number-of-elements="2">
{% block preheader %}
{% include '@bsi-cx/design-standard-library-email/content-elements/base/header-preheader/template.twig' %}
{% endblock %}
</td>
</tr>
<tr>
<td style="padding: 0; margin: 0;">
<table style="width: 100%; border: 0; border-spacing: 0;">
<tr>
<td align="left" style="padding: 0; margin: 0; text-align: left;" data-bsi-dropzone="header-left-dz-4v3EEz" data-bsi-dropzone-allowed-elements="logo-TlgUGB text-Or4N33 cta-eoRgSU" data-bsi-dropzone-max-number-of-elements="1">
{% block headerLeft %}
{% if headerLogoAlign == 'left' %}
{% include './content-elements/base/logo/template.twig' %}
{% endif %}
{% endblock %}
</td>
<td align="right" style="padding: 0; margin: 0; text-align: right;" data-bsi-dropzone="header-right-dz-BnqL9s" data-bsi-dropzone-allowed-elements="text-Or4N33 cta-eoRgSU logo-TlgUGB" data-bsi-dropzone-max-number-of-elements="1">
{% block headerRight %}
{% if headerLogoAlign == 'right' %}
{% include './content-elements/base/logo/template.twig' %}
{% endif %}
{% endblock %}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0; margin: 0;" data-bsi-dropzone="header-img-dz-QT6wSZ" data-bsi-dropzone-allowed-elements="header-img-GTzJdB divider-LQi2yS" data-bsi-dropzone-max-number-of-elements="1">
{% block headerImage %}
{% include './content-elements/base/header-img/template.twig' %}
{% endblock %}
</td>
</tr>
<div style="width: 100%; max-width: {{properties.layoutWidth + 10}}px; margin: 0 auto;">
<table role="presentation" class="{{darkModeClassBg}}" style="width: 100%; border: 0; border-spacing: 0; background-color: #ffffff;">
<tr>
<td align="center">
<!--[if mso]>
<table role="presentation" align="center" style="width: {{ layoutWidth }}px;">
<tr>
<td style="padding: 10px 0;">
<![endif]-->
<div class="bsi-header" style="width: 96%; max-width: {{ layoutWidth }}px; margin: 10px auto;">
<table role="presentation" style="width: 100%; border: 0; border-spacing: 0;">
<tr>
<td align="center" style="padding: 0; margin: 0; text-align: center;" data-bsi-dropzone="preheader-dz-fWSCej" data-bsi-dropzone-allowed-elements="header-preheader-cVwk8f logo-TlgUGB" data-bsi-dropzone-max-number-of-elements="2">
{% block preheader %}
{% include '@bsi-cx/design-standard-library-email/content-elements/base/header-preheader/template.twig' %}
{% endblock %}
</td>
</tr>
<tr>
<td style="padding: 0; margin: 0;">
<table style="width: 100%; border: 0; border-spacing: 0;">
<tr>
<td align="left" style="padding: 0; margin: 0; text-align: left;" data-bsi-dropzone="header-left-dz-4v3EEz" data-bsi-dropzone-allowed-elements="logo-TlgUGB text-Or4N33 cta-eoRgSU" data-bsi-dropzone-max-number-of-elements="1">
{% block headerLeft %}
{% if headerLogoAlign == 'left' %}
{% include './content-elements/base/logo/template.twig' %}
{% endif %}
{% endblock %}
</td>
<td align="right" style="padding: 0; margin: 0; text-align: right;" data-bsi-dropzone="header-right-dz-BnqL9s" data-bsi-dropzone-allowed-elements="text-Or4N33 cta-eoRgSU logo-TlgUGB" data-bsi-dropzone-max-number-of-elements="1">
{% block headerRight %}
{% if headerLogoAlign == 'right' %}
{% include './content-elements/base/logo/template.twig' %}
{% endif %}
{% endblock %}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0; margin: 0;" data-bsi-dropzone="header-img-dz-QT6wSZ" data-bsi-dropzone-allowed-elements="header-img-GTzJdB divider-LQi2yS" data-bsi-dropzone-max-number-of-elements="1">
{% block headerImage %}
{% include './content-elements/base/header-img/template.twig' %}
{% endblock %}
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
</div>
<!--[if mso]>
<![endif]-->
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" data-bsi-dropzone="layout-3Pmmjt">
{% block content %}
{% endblock %}
</div>
<div data-bsi-dropzone="footer-j91rgA">
{% block footer %}
{% include '@bsi-cx/design-standard-library-email/content-elements/layout/layout-dark-footer/template.twig' %}
{% endblock %}
</tr>
</table>
<div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" data-bsi-dropzone="layout-3Pmmjt">
{% block content %}
{% endblock %}
</div>
<div data-bsi-dropzone="footer-j91rgA">
{% block footer %}
{% include '@bsi-cx/design-standard-library-email/content-elements/layout/layout-dark-footer/template.twig' %}
{% endblock %}
</div>
</div>
</body>
</html>