Resizing logo to fit Outlook desktop

https://i.sstatic.net/e34kS.pngWhen creating emails using a Drag & Drop editor in a CRM (Dynamics 365 with ClickDimensions), I encountered an issue with the logo not displaying correctly in Outlook desktop. Despite using inline styling, the logo appeared full-sized and out of place. Even when adjusting the image width inline, it still didn't display as intended.

Attempting to address this problem, I came across a conditional code snippet that was supposed to help, but unfortunately, it did not resolve the issue.

<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>

Due to limitations in the HTML editor, I am unable to include any code outside of the provided box. Any suggestions on how to fix the logo display issue in Outlook would be greatly appreciated. Thank you!

Answer №1

If you find yourself unable to write code outside of that designated box, you'll simply have to accept the fact that the logo will appear in the wrong size when viewed in Outlook.

Outlook tends to be troublesome with images, often displaying them at their original sizes and disregarding any inline styling for width. The workaround is to include width="130" within the <img> tag.

Here's an illustration:

<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 itself is actually sized 344x161, but it seems like Outlook is displaying it as such. You could either resize the image or insert width="160" into the <img> tag, or simply come to terms with the issue as is.

Wishing you the best of luck.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Various settings in JQuery UI Slider

Does anyone know how to customize the steps in a jQuery UI slider? I want to set specific values as steps, like 0, 1200, 2000, 2200, and 3000. Any suggestions on how to achieve this? const rangeSliderInit = () => { const valueArray = [0, 400, 1000, 1 ...

The change() function in jQuery appears to have a glitch where it does not properly execute during the initial onclick event, but functions correctly for

Here is the button code snippet: <li class="cnt-li"> <button class="btn-container" title="Add Container" data-toggle="modal" data-target=".add-ctn-modal"> <img src="images/add.png" alt="Add Container"> </button> </li> ...

Mobile Menu in wordpress stays visible after being clicked

I recently created a one-page layout that includes some links. However, when I view the site on my smartphone and open the main menu using the button to click on a link (which scrolls within the same page), I noticed that the mobile menu remains visible a ...

Concealing categories within an accordion-styled menu

Recently, I put together a list that includes various pieces of information along with an accordion menu. Take a look at the list However, I've encountered a small issue which has left me quite perplexed. When a menu item is clicked - for instance, ...

Trying to open the DB URL in a new tab when using PHP and MySQL will not work as expected

Before I begin, I want to express my gratitude to the community of StackOverFlow users for providing valuable answers. As a novice in PHP/mySql, I am learning through books and examples from others. Currently, my issue revolves around a MySQL database wit ...

Building a hyperlink from a textbox input: A step-by-step guide

I am attempting to modify the href of my link based on the content of the textbox with id="serie". However, Firefox is indicating that el is null. Can you help me identify where the issue lies? (The top section is the Page, the middle part shows the debug ...

Enhance input and icon alignment using CSS based on the Bootstrap framework

How can I create focus on two elements simultaneously? <div class="form-group"> <label class="control-label"></label> <div class="col-sm-10"> <input type="text" class="form-control"> <span class="lo ...

Controlling the order of class specification prioritization

I have a situation with DOM elements that possess both the foo and bar classes: <div class="foo bar">...</div> I am looking to manage the priority between them. Referring to the W3C specification on this matter, I considered that appending ad ...

The element is anchored within a div, but its position is dependent on a JavaScript script

I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as eithe ...

What is the best way to display properly formatted code to users in a React JS application?

The backend is sending code to me in plain text format. Here's an example: def countNegatives(matrix): count = 0 for row in matrix: for num in row: if num < 0: count += 1 return count It's just basic text, but I need to show this to the user ...

Calculating the median in JavaScript utilizing a for loop

Currently, I am in the process of learning JavaScript. My goal is to calculate the median of a set of numbers that I input through a prompt when I click the button labeled "find median". function CalculateMedia() { var n = prompt("Enter the number of e ...

Resolving Issues with Page Feature Images on Your WordPress Site

Currently enrolled in a web development course, I collaborated with my instructor to create a custom website. However, I am facing an issue where the header image appears shorter on the Resources page () and Contact page () compared to the Blog page (). De ...

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...

Absolute positioning causes an element's height to increase

As I delve into the realm of typographical animations and seek to calculate the baseline of a font at various sizes, I've stumbled upon a peculiar discovery: It appears that the height values of elements tend to increase in an erratic manner when thei ...

identifying the element targeted on dynamically created links with the help of jquery

I have created dynamic links where clicking on a country link displays the cities of that particular country. I am trying to retrieve the event.target.id of the dynamically generated city link when it is clicked. $(".countryName").children().on('cl ...

What steps should I follow to make a stunning photo collage using HTML, CSS, and Bootstrap?

I attempted to insert images into the div but encountered difficulties. <img class="img-fluid" src="https://via.placeholder.com/800x800" style="border-radius: 20px" ...

Having trouble locating the Xpath for the download link, it appears to be listed as a list item (li). I've attempted using the Contains function without success. Any assistance would be

Seeking the Xpath for the image below. The Download File link is on the right and the element DOM is on the left. enter image description here I attempted to find the Xpath by directly copying it and also using Contains text "Download File", but my scrip ...

Issues with navigation menu not showing dropdown options and impacting webpage layout (HTML/CSS)

I'm having trouble creating a drop-down navigation menu using HTML and CSS. When I add the drop-down list, my menu extends onto two lines instead of one, and the drop-down menu doesn't appear when hovering. Here is a link to the jsfiddle for refe ...

Dividing a button within a flex container

I'm currently building a contact form and I applied display:flex to its div. All the fields are showing up properly and dynamically resizing, except for the submit button which always gets cut in half. Shouldn't it behave like the rest of t ...

Is there a way to retrieve the present value of a dropdown menu once an ajax call is successful?

Currently, I am facing an issue where I am unable to retrieve the selected value from a dropdown menu. The logged value is always the first option in the dropdown menu, even though I have set it to a different value. Can someone help me identify what I may ...