<!--[if mso]> | |
<center> | |
<table><tr><td width="580"> | |
<![endif]--> | |
<div style="max-width:580px; margin:0 auto;"> | |
<p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p> | |
</div> | |
<!--[if mso]> | |
</td></tr></table> | |
</center> | |
<![endif]--> |
This comment has been minimized.
This comment has been minimized.
awesome! |
This comment has been minimized.
This comment has been minimized.
Some fixes to your 'if' condition: |
This comment has been minimized.
This comment has been minimized.
@xmalinov In my Litmus tests, and also on Campagne Montior's CSS sheet, max-width is still broken in Outlook 2013. |
This comment has been minimized.
This comment has been minimized.
Thanks for sharing this trick.. ;) |
This comment has been minimized.
This comment has been minimized.
@renestalder @xmalinov running Outlook 15, can confirm max-width and width broken. |
This comment has been minimized.
This comment has been minimized.
ah you saviour, I couldn't get width working to save my life in outlook |
This comment has been minimized.
This comment has been minimized.
Of course! I'd seen the conditional code for Outlook, but hadn't thought of using it to fix the max-width issue until I saw this. Thanks! |
This comment has been minimized.
This comment has been minimized.
This works better:
|
This comment has been minimized.
This comment has been minimized.
@people who have painfully wound up on this page: phillip's solution totally works
|
This comment has been minimized.
This comment has been minimized.
@philipp-klinz @duggi that's great! fixes max-width failures on outlook 2010, 2013, and 2016 for me |
This comment has been minimized.
This comment has been minimized.
@philipp-klinz nice! |
This comment has been minimized.
This comment has been minimized.
This saved my butt! I have tried so many things to fix this same issue and got so fed up. I finally have my sanity back. |
This comment has been minimized.
This comment has been minimized.
What if the content is an image? I've been trying 15 million things to get an image to resize responsively in Outlook 2010. It works other places, but not there. 2 weeks ago I had it working, but I changed/adding code, so I broke it at some point. My wrapper and text is responsive when I resize the Outlook window, but not the images. I need my sanity back too! |
This comment has been minimized.
This comment has been minimized.
Wondering if any of you all have such a graceful and practical suggestion for handling Thunderbird? My issue is, I don't want to affect users that are viewing the email in... say... Gmail in Firefox. Only the Thunderbird client has the max-width non-compatibility issue, but all the targets I can find would affect the Firefox browser as well. |
This comment has been minimized.
This comment has been minimized.
Great stuff. Thanks for sharing. |
This comment has been minimized.
This comment has been minimized.
@skt1999 Have your tried setting width property on the image element itself? |
This comment has been minimized.
This comment has been minimized.
@abdelrady this solves the issue in the most simple way. Thanks! |
This comment has been minimized.
This comment has been minimized.
I have the problem where it constrain max-width (good!) but then it no longer scales down smaller than max-width on Outlook Office Home & Business 2016. |
This comment has been minimized.
This comment has been minimized.
@philipp-klinz fyi I left your solution as an answer to this StackOverflow question: Is there an equivalent of CSS max-width that works in HTML emails?: answer |
This comment has been minimized.
This comment has been minimized.
Hi everybody,
@section Menu
@section Header Image
@section Description
@section Big Screen Smart Mobile Single Footer Text area
|
This comment has been minimized.
This comment has been minimized.
Do you use conditional outlook comment code around every table or just inner tables whose width you need to control? |
This comment has been minimized.
This comment has been minimized.
I needed a responsive (fluid) table that had a maximum width of 600px and this code is working for me: <!--[if mso]>
<table><tr><td width="600">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px">
<tr>
<td>
<!-- Your content here -->
</td>
</tr>
</table>
<!--[if mso]>
</td></tr></table>
<![endif]--> |
This comment has been minimized.
This comment has been minimized.
Awesome |
This comment has been minimized.
This comment has been minimized.
Thank you !! |
This comment has been minimized.
This comment has been minimized.
I was making an email in Pardot (marketing tool) and the tool automatically changes the width attribute on my images to the width of the image. Pardot does not allow me to set a maximum width. <!-- Outlook ignores the max-width -->
<img src="https://example.com/images/my-image.jpg" style="max-width: 200px" width="400"> Since outlook does not care if you set a max-width in the style attribute the only solution is to change the width of the image back after it was uploaded to Pardot. None of the examples above seemed to work for images (in Outlook) so the only solution for me was to recommend uploading images with the same width as the original image or to change the width back after uploading an image. |
This comment has been minimized.
This comment has been minimized.
Dope. Thanks for this. |
This comment has been minimized.
This comment has been minimized.
This saved me hours of the worst kind of debugging time, thank you!! |
This comment has been minimized.
This comment has been minimized.
I'm still having trouble... I tried using this but maybe I'm using it in the wrong place? This is the original before I tried @philipp-klinz idea.
|
This comment has been minimized.
This comment has been minimized.
Thank you for THE Solution! |
This comment has been minimized.
This comment has been minimized.
You're the real MVP |
This comment has been minimized.
This comment has been minimized.
Isn't better use table and td? |
This comment has been minimized.
This comment has been minimized.
love it, thanks @elidickinson still works after 8 years |
This comment has been minimized.
Some more resources on email design tricks on http://www.industrydive.com/blog/author/eli/ and http://esd.io/blog/html-email-buttons-conditional-comments.html