Sizing logo for Outlook desktop
I am building emails using a Drag & Drop editor in a CRM (Dynamics 365 w/ ClickDimensions). For the logo, I am using HTML to insert an image. The logo shows up fine for every email client except Outlook desktop. Here it shows up full-sized and ignores the inline styling. If I add "width= ... " inline with the img, it shows up smaller, but it's oriented in the top left of the email instead of where it's supposed to be.
I found the following conditional and tried to make it work, but it's not doing anything.
<div style="box-sizing: border-box; white-space: normal;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.42857143; word-wrap: break-word !important; white-space: normal; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<!--[if (gte mso 9)|(IE)]>
<style>
#logo {
max-width: 130px !important;
padding-left: 40px !important;
}
</style>
<![endif]-->
<a href="https://www.southuniversity.edu/"><img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" alt="South University Logo" style="max-width:130px; display:block; margin:auto;"></a>
</div>
I cannot write any code outside of the that is given in the box, this is not a full-fledged html editor. Anything outside gets erased. Any ideas on what I can write to make the logo appear properly in Outlook? Thank you!!
html css outlook image-size
asked Nov 14 '18 at 19:54
AC_DCEDHAC_DCEDH
226
add a comment |
I am building emails using a Drag & Drop editor in a CRM (Dynamics 365 w/ ClickDimensions). For the logo, I am using HTML to insert an image. The logo shows up fine for every email client except Outlook desktop. Here it shows up full-sized and ignores the inline styling. If I add "width= ... " inline with the img, it shows up smaller, but it's oriented in the top left of the email instead of where it's supposed to be.
I found the following conditional and tried to make it work, but it's not doing anything.
<div style="box-sizing: border-box; white-space: normal;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.42857143; word-wrap: break-word !important; white-space: normal; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<!--[if (gte mso 9)|(IE)]>
<style>
#logo {
max-width: 130px !important;
padding-left: 40px !important;
}
</style>
<![endif]-->
<a href="https://www.southuniversity.edu/"><img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" alt="South University Logo" style="max-width:130px; display:block; margin:auto;"></a>
</div>
I cannot write any code outside of the that is given in the box, this is not a full-fledged html editor. Anything outside gets erased. Any ideas on what I can write to make the logo appear properly in Outlook? Thank you!!
html css outlook image-size
asked Nov 14 '18 at 19:54
AC_DCEDHAC_DCEDH
226
add a comment |
I am building emails using a Drag & Drop editor in a CRM (Dynamics 365 w/ ClickDimensions). For the logo, I am using HTML to insert an image. The logo shows up fine for every email client except Outlook desktop. Here it shows up full-sized and ignores the inline styling. If I add "width= ... " inline with the img, it shows up smaller, but it's oriented in the top left of the email instead of where it's supposed to be.
I found the following conditional and tried to make it work, but it's not doing anything.
<div style="box-sizing: border-box; white-space: normal;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.42857143; word-wrap: break-word !important; white-space: normal; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<!--[if (gte mso 9)|(IE)]>
<style>
#logo {
max-width: 130px !important;
padding-left: 40px !important;
}
</style>
<![endif]-->
<a href="https://www.southuniversity.edu/"><img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" alt="South University Logo" style="max-width:130px; display:block; margin:auto;"></a>
</div>
I cannot write any code outside of the that is given in the box, this is not a full-fledged html editor. Anything outside gets erased. Any ideas on what I can write to make the logo appear properly in Outlook? Thank you!!
html css outlook image-size
asked Nov 14 '18 at 19:54
AC_DCEDHAC_DCEDH
226
I am building emails using a Drag & Drop editor in a CRM (Dynamics 365 w/ ClickDimensions). For the logo, I am using HTML to insert an image. The logo shows up fine for every email client except Outlook desktop. Here it shows up full-sized and ignores the inline styling. If I add "width= ... " inline with the img, it shows up smaller, but it's oriented in the top left of the email instead of where it's supposed to be.
I found the following conditional and tried to make it work, but it's not doing anything.
<div style="box-sizing: border-box; white-space: normal;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.42857143; word-wrap: break-word !important; white-space: normal; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<!--[if (gte mso 9)|(IE)]>
<style>
#logo {
max-width: 130px !important;
padding-left: 40px !important;
}
</style>
<![endif]-->
<a href="https://www.southuniversity.edu/"><img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" alt="South University Logo" style="max-width:130px; display:block; margin:auto;"></a>
</div>
I cannot write any code outside of the that is given in the box, this is not a full-fledged html editor. Anything outside gets erased. Any ideas on what I can write to make the logo appear properly in Outlook? Thank you!!
html css outlook image-size
html css outlook image-size
asked Nov 14 '18 at 19:54
AC_DCEDHAC_DCEDH
226
asked Nov 14 '18 at 19:54
AC_DCEDHAC_DCEDH
226
edited Nov 14 '18 at 20:11
AC_DCEDH
asked Nov 14 '18 at 19:54
AC_DCEDHAC_DCEDH
226
asked Nov 14 '18 at 19:54
AC_DCEDHAC_DCEDH
226
asked Nov 14 '18 at 19:54
AC_DCEDHAC_DCEDH
226
226
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
If you can't write code beyond that box, you're going to have to live with the logo being the incorrect size in Outlook.
Outlook is problematic when it comes to images. It will display images at the size they were created and ignore your inline style width declaration. The fix is to add width="130" to the <img>.
An example:
<img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" width="130" alt="South University Logo" style="max-width:130px; display:block; margin:auto;">
The image size is actually 344x161 and I am guessing Outlook is displaying it at that size. Either resize the image or add width="160" to the <img> or live with the issue.
Good luck.
answered Nov 14 '18 at 20:21
gwallygwally
1,6792617
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307837%2fsizing-logo-for-outlook-desktop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you can't write code beyond that box, you're going to have to live with the logo being the incorrect size in Outlook.
Outlook is problematic when it comes to images. It will display images at the size they were created and ignore your inline style width declaration. The fix is to add width="130" to the <img>.
An example:
<img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" width="130" alt="South University Logo" style="max-width:130px; display:block; margin:auto;">
The image size is actually 344x161 and I am guessing Outlook is displaying it at that size. Either resize the image or add width="160" to the <img> or live with the issue.
Good luck.
answered Nov 14 '18 at 20:21
gwallygwally
1,6792617
add a comment |
If you can't write code beyond that box, you're going to have to live with the logo being the incorrect size in Outlook.
Outlook is problematic when it comes to images. It will display images at the size they were created and ignore your inline style width declaration. The fix is to add width="130" to the <img>.
An example:
<img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" width="130" alt="South University Logo" style="max-width:130px; display:block; margin:auto;">
The image size is actually 344x161 and I am guessing Outlook is displaying it at that size. Either resize the image or add width="160" to the <img> or live with the issue.
Good luck.
answered Nov 14 '18 at 20:21
gwallygwally
1,6792617
add a comment |
If you can't write code beyond that box, you're going to have to live with the logo being the incorrect size in Outlook.
Outlook is problematic when it comes to images. It will display images at the size they were created and ignore your inline style width declaration. The fix is to add width="130" to the <img>.
An example:
<img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" width="130" alt="South University Logo" style="max-width:130px; display:block; margin:auto;">
The image size is actually 344x161 and I am guessing Outlook is displaying it at that size. Either resize the image or add width="160" to the <img> or live with the issue.
Good luck.
answered Nov 14 '18 at 20:21
gwallygwally
1,6792617
If you can't write code beyond that box, you're going to have to live with the logo being the incorrect size in Outlook.
Outlook is problematic when it comes to images. It will display images at the size they were created and ignore your inline style width declaration. The fix is to add width="130" to the <img>.
An example:
<img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" width="130" alt="South University Logo" style="max-width:130px; display:block; margin:auto;">
The image size is actually 344x161 and I am guessing Outlook is displaying it at that size. Either resize the image or add width="160" to the <img> or live with the issue.
Good luck.
answered Nov 14 '18 at 20:21
gwallygwally
1,6792617
answered Nov 14 '18 at 20:21
gwallygwally
1,6792617
answered Nov 14 '18 at 20:21
gwallygwally
1,6792617
answered Nov 14 '18 at 20:21
gwallygwally
1,6792617
1,6792617
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307837%2fsizing-logo-for-outlook-desktop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
