Outlook 365 (Windows) 2025 ignoring CSS and breaking hybrid email layouts

[fivedoor]

Email Client
Outlook | Office365 | desktop app | latest version 2505
Client: Outlook Desktop New 365
Outlook Version: 1.2025.716.500

Operating System
Windows 11 Pro

Expected Result
Outlook renders hybrid email columns correctly (rendering expectations similar to gmail)
CSS in style block is read not stripped or ignored.
Background images are supported

Actual Result
Emails are rendering as if style block CSS is being ignored
Background images defined in style block are not rendered
Hybrid columns (in divs) are stacked not parallel (this should work even if style block CSS is stripped)

Steps to reproduce
Code example provided below to reproduce

Code sample
Example code to reproduce hybrid columns break can be found here: 
https://github.com/fivedoor/codekitchen/blob/master/2025/tests/ol365-example1.html

Screenshots
Litmus Tests render fine:

Live test to Outlook 365 2025:

Additional context

• Seems like this may be due to a recent change at time of writing. Emails that were rendering fine a few weeks or so ago are now breaking when retested. The old tests still look fine in the inbox.

• Occasionally when testing I noticed an email with look correct for a split second and then revert to the broken rendering state.

• The only other report of this I’ve seen that sounded very similar was on the email geeks slack (21st July 2025) which suggested this may be isolated to @corporatedomains and not occur when using @outlook.com addresses
  https://emailgeeks.slack.com/archives/C1Z733K1P/p1753114148962669

• In the example shared I was able to fix the rendering i.e. get the columns to render side by side by replacing width:84px in the img tags with max-width: 84px !important. However, that solution was not resolving similar issues in other email examples I tested.

• Outlook has produced different rendering results from the same code when retested which is making it hard to extrapolate anything useful. So the above fix both worked and did not work when tested (worked for the example provided as of last test). I downloaded the tests as an .eml file and compared source code to double check the html was a match. (I had to do this because the new Outlook no longer seems to have an option to just 'view source'). The rendering of each test on first view is preserved so I have two different rendering results I can view in the inbox for the same code.

• Based on the extracted .eml files the html and all the style block css is in tact - just being ignored it seems

[fivedoor]

Adding some additional context:

Seems like the issue is connected to the 'reading pain' layout which can be switched in the View tab.

• If I switch to ‘pop up’ or ‘fill screen’ reading pane style the emails render fine.
• With ‘Show on right’ or ‘Show on the bottom’ options selected the emails break no matter how wide the display pane is.

I’d assume most people use the default ‘Show on right’ (as I do) which prior to a few months ago seemed to render emails as expected

[nicolemerlin]

@fivedoor I'm not seeing the issue on Classic (2507) or on New Outlook (1.2025.801.400) both on Win11.

There is a high likelihood this is being caused by a layer of security software that is processing your emails. This banner indicates this is happening:

These software layers intercept the email before it's delivered to your mailbox and change the HTML and CSS, add the banner, then delivers it to your mailbox.

I'd recommend viewing the message source as received by Outlook to check what has actually been delivered to you.

New Outlook: Click the three dots top-right above the message (next to Reply/Forward), go View » View Message Source.

Classic Outlook: In some versions, you can open the message in a new window, then find the Actions » Other Actions » View Source like this:

On newer Classic Outlook that is gone, I had to add the "View Source" command to the Quick Access toolbar. Just choose from "All Commands" and add "View Source". Then click it from that toolbar to get the source.

[fivedoor]

@nicolemerlin thankyou for picking up on this. It's much appreciated.

RE Email Source

When I have extracted the message source and reviewed the code the html and CSS style block always seemed be in tact I.e. nothing obviously stripped or added other than the ‘Caution banner’ which, based on the code added (being a table of undefined width at the top of email body), I wouldn't normally expect to cause the rendering issues experienced encountered.

I don’t seem to have the ‘View message Source’ option in the new Outlook I’m running (as in screenshot). But I have extracted by saving the email as .eml and reviewing the source via that.

Noting the email renders fine on my version of Outlook Classic (all be it with the usual hacks and fixes)

Security layer
Would it be wrong to assume if the culprit was security software processing the emails, I would expect to see some evidence of that in the email source e.g. the style block stripped.

Meantime I will pick up with our OPS team to check if there were any changes to internal security software that might overlap the issue.

thanks!

[nicolemerlin]

@fivedoor Apologies as I missed the question in here previously!

To answer it – yes, are correct. If the software layer modified the email, you would see the modifications in the Source / .eml file source. Just like how you could see the banner HTML – usually if the CSS has been modified, it would be missing (or commented out).

If you're not seeing any modifications there, I would say it's not the main cause here then. Sorry, and thanks for checking!

[dazgreer]

Hi @nicolemerlin, I haven't found a solution to this but I'm adding my experience here incase it helps.

My issue occurs when using this code: https://mjml.io/try-it-live/m5Vwx8F0q. It's mobile-first and uses media-queries to display the images/text side-by-side. The preview pane display incorrectly (stacked) but when opened, it displays ok.

The behaviour is typically that the email view in the preview pane either displays incorrectly or displays correctly momentarily (anything from a few to 10-20 seconds) before switching. This sometimes happens when you click to a different email and back again and sometimes just when not doing anything so i'd guess that it's a delay in doing whatever it does (I'm using a VM to test so it is slower) rather than an action.

For all email tests, opening the email renders it correctly but the preview pane remains the same.

The version of Outlook is New Outlook 1.2026.213.100. If I log into the web interface then the same email tests display correctly. There is zero difference in the source code for these when download as an .eml file and compared.

My testing observes that it's something to do with the media query. If I keep the same styles in an external style block in the head without the media query, then the email renders correctly. I've tried various updates to the MQ itself with no success.

This is the style block with the MQ as rendered in the browser (which is displaying correctly):

<style type="text/css">
<!--
@media only screen and (min-width:480px) {
.rps_8bc1 .x_mj-column-per-30
      {width:30%!important;
      max-width:30%}
.rps_8bc1 .x_mj-column-per-70
      {width:70%!important;
      max-width:70%}
.rps_8bc1 .x_mj-column-px-180
      {width:180px!important;
      max-width:180px}
.rps_8bc1 .x_mj-column-px-420
      {width:420px!important;
      max-width:420px}
.rps_8bc1 .x_mj-column-per-50
      {width:50%!important;
      max-width:50%}

      }
-->
</style>

Beyond that, I'm stuck on it, it appears that Outlook is reading the media queries momentarily but then discarding them in the preview pane... what a frustrating bug! 🙁