'Responsive HTML text/images in Outlook365, gmail, etc

I have a PowerShell script that creates a single HTML file, email.html, with inline CSS and embedded base64 images.. then sends it daily to me (my website reports).

I want all (text/images) that are in the body of the email to resize automatically based on the width of the email client viewable area. Admittedly, I have limited experience in HTML/CSS. What am I doing wrong in my example below? Note: I truncated the base64 text in the example below so it doesn't take up too much space in my example.

Code:

<!doctype html>
<html>

<head>
<style type="text/css">
    @media screen and (max-device-width:640px),
    screen and (max-width:640px) {
        .responsivetext {font-size: 2vw !important;width:auto;height:auto;vertical-align:middle}
    }
</style>

</head>

<body>
    <td style="font-family: Arial;" class="responsivetext">I have tried everything.  Why wont this text resize when resizing Outlook 2016?</td>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAIEAIAAADwyk6cAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0T...." />
</body>

</html>
htmlcssoutlookresponsive


Solution 1:[1]

I've been dealing with this situation too. It is very difficult to achieve success in all options.

Outlook does not really have any solid support for media queries unfortunately and is often 'left out' when it comes to mobile responsive emails. Can media queries be used in Outlook

I suggest to you here you can create responsive html design and examine it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 gokhancevik

Related Questions