Solved

Outlook 365 displaying email wider the 600px I set in Styles

  • 7 January 2022
  • 7 replies
  • 1884 views

Badge +3

The subject kinda says it all. I sent an email with a fixed width of 600px and a colleague sent me a screenshot of what she saw which was much wider (about 800px). A 600px image did not fill the email width and paragraph text was much wider than it should have been. 

Anything to be done about this?

icon

Best answer by highfram 15 July 2022, 19:20

View original

7 replies

Userlevel 7
Badge +61

Hi @chrish,

Thank you for sharing this with us.

You’ve taken the correct first step. In addition to this, Also, in the “Styles” tab, if the setting of Auto-restrict blocks to fit within the width above is not enabled, I would recommend doing so as this may be the cause for your rendering issue on certain devices. I also recommend trying out the solution outlined in this post which speaks to adjusting the width of each discrete image in the template.

At this time there are industry-wide display issues with Outlook, as they choose to render HTML differently than other email clients.

I hope those resources are helpful to you.

Badge +3

Thank you DD, I don’t see a setting for ‘Auto-restrict block to fit within the width above’ in the Styles tab. Am I missing something?

Userlevel 7
Badge +61

Hi @chrish,

Thank you for your reply.

Apologies, I should have clarified in my initial reply that auto-restrict blocks will only exist in the “Styles” tab for Klaviyo’s default flow emails. So if your email was created from scratch, you won’t see it in the flow email.

If you do access the auto-restrict box from a default flow email template, once you check it off and save, it will not display for the same default flow email again.

Something else you may want to try is manually adding in a div for the max width into the source code of each text block, that’s the solution outlined on this thread.

I would also add an important tag so it looks something like this:

 

 

I hope that solution or a combination of the above helps :) 

Badge

We’ve just been able to solve this issue for our email campaign that was rendering too wide in Outlook. We found that it was the width of the images contained in the email that were causing the issue. The images were part-width and had text running alongside. We found that by entering a value in the max width field (for example 230px or 150px) for each image, the images held their size and did not force the email to expand beyond the standard 600px wide. 

Userlevel 4
Badge +9

Piggybacking off this, is there a way to solve this issue for a product block? Any ideas @Dov ?

Userlevel 7
Badge +60

Hi @wernstrom

 

Thanks for sharing your question with us! 

 

Do you mind sharing if you tried @highfram’s workflow about adjusting the images max width field and whether or not you’re on outlook as well?

 

Thanks for participating in the Community!

-Taylor

Hi @chrish,

Thank you for sharing this with us.

You’ve taken the correct first step. In addition to this, Also, in the “Styles” tab, if the setting of Auto-restrict blocks to fit within the width above is not enabled, I would recommend doing so as this may be the cause for your rendering issue on certain devices. I also recommend trying out the solution outlined in this post which speaks to adjusting the width of each discrete image in the template.

At this time there are industry-wide display issues with Outlook, as they choose to render HTML differently than other email clients.

I hope those resources are helpful to you.

I know this issue has been supplied a more appropriate and correct fix, but for anyone visiting this page in the future - fyi the answer I’ve quoted above is not helpful for Outlook for Windows desktop programs such as Outlook 365 as well as Outlook 2007 - 2021.

The fix hasn’t been copied over correctly from the link supplied.
Max-width is not supported in Outlook for Windows desktop programs and so the fix in the link in Dov’s response should be reviewed in detail, which you can find at the top of that page.

Reply