logo coming out of the background color and the text color is always black in MS outlook

Anjali Agarwal 1,531 Reputation points
2023-07-30T22:39:52.2333333+00:00

I am trying to show a logo and a text side by side in an outlook page. I have a picture and logo on an HTML page. When I send the content of the HTML page to the MS outlook, the page looks different. I am not using any flexbox in my HTML code, but outlook translates it differently. I am not sure what stylesheet, I can change to make the logo and text same as HTML. Below is the HTML page:

User's image

and below is what the logo and text looks like in the outlook:

User's image

The picture protrudes outside the blue background color and the second text: "This is text2" is black color. Although, I specified in my code that second text is white color. How can I fix this issue. below is my style sheet and HTML code:

<style>


        .logo {
            transform: translateX(2em);
        }
        .name1 {
            font-size: 25px;
            color: #e9c46a;
        }

        .name2 {
            font-size: 25px;
            color: #ffffff;
        }

        .container {
          
            
            padding-bottom: 40px;
           
        }

            .container img {
                width: 50px;
                height: 50px;
            }

        .small-image img {
            width: auto;
            height: 40px;
        }

        .collapse-border table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .font-aligned .name1 {
            vertical-align: bottom;
        }

        .font-aligned .name2 {
            vertical-align: top;
        }
   </style>

HTML Code:


Outlook
Outlook
A family of Microsoft email and calendar products.
4,425 questions
Office Development
Office Development
Office: A suite of Microsoft productivity software that supports common business tasks, including word processing, email, presentations, and data management and analysis.Development: The process of researching, productizing, and refining new or existing technologies.
4,226 questions
0 comments No comments
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.