My email template (HTML with inline CSS) features a logo with a fixed width and height (px). Oddly, after receiving an email using this template, the logo expanded to fill the entire page width. I attempted to add !Important to the width and height properties, but it had no effect.
The template displays correctly in the editor, but not in Outlook.
What might be causing this issue and how can it be resolved?
Below is an example of the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>New Assignment</title>
<style type="text/css">
/* reset */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block
}
.logo {
width: 200px !important;
height: 200px !important;
margin: 0 auto;
margin-bottom: 20px;
-webkit-filter: drop-shadow(5px 5px 50px rgba(0, 0, 0, 0.7));
filter: drop-shadow(5px 5px 50px rgba(0, 0, 0, 0.7));
}
...
/********** CONTINUE THE STYLE SHEET ***************/
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>