is there any way i could target elements in outlook mobile in a html mail tamplate?

Adina Martiniuc 0

my mail is structured like this: for desktop i have a column with the text and another column with an image next to each other(like rows) while for mobile the image needs to be under the text. This works for gmail mobile but in outlook app(mobile) it displays the desktop version...

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<meta name="x-apple-disable-message-reformatting">

<!--[if !mso]><!-->

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!--<![endif]-->

<title></title>

<!--[if mso]>

<style type="text/css">

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

    div, td {padding:0;}

    div {margin:0 !important;}

</style>

<noscript>

    <xml>

        <o:OfficeDocumentSettings>

            <o:PixelsPerInch>96</o:PixelsPerInch>

        </o:OfficeDocumentSettings>

    </xml>

</noscript>

<![endif]-->

<style type="text/css">

    body {

        margin: 0;

        padding: 0;

        word-spacing: normal;

        background-color: #ffffff;

        font-family: Arial, sans-serif;

    }

    table {

        border-collapse: collapse;

        width: 100%;

    }

    .email-container {

        width: 100%;

        max-width: 400px;


        

        background-color: #ffffff;

    }

    .full-width-image {

        width: 100%;

        height: auto;

        display: block;

        margin: 0 auto;

    }

    .content-padding {

        padding-left:50px;


      

    }

    .text-left {

        text-align: left;

    }

    .text-center {

        text-align: center;

    }

</style>
</head>

<body>

<table role="presentation" class="email-container">

    <tr>

        <td style="padding-top: 40px; padding-left:13%;">

            <img src="https://i.postimg.cc/nrk0Zx2P/logo-desktop.png" width="280" alt="Logo"  />

        </td>

    </tr>

    <tr>

        <td class="content-padding text-left">

            <p style="margin-top: 25px; margin-bottom: 12px; font-size: 12px; color: black; font-weight: 600;" >

                Join us for our company symposium at GA²LEN<br>ANACARE Food Allergy and Anaphylaxis Forum 2024

            </p>

            <p style="margin-top: 20px; margin-bottom: 7px; color:#3C70A6; font-weight: 600; font-size: 26px; line-height: 1.3;">

                Peanut OIT in Practice:<br>Meeting patients’ needs

            </p>

            <p style="margin-top: 0; margin-bottom: 12px; font-style: italic; font-size: 15px;">

                Moderator: A. Muraro (Italy)

            </p>

            <p style="margin-top: 27px; margin-bottom: 14px; font-size: 12px;line-height:18px;">

                <span style="font-weight: bold;">Agenda:</span><br>

                <br>

                1. Navigating Peanut Allergy: Real life impact and<br><span style="padding-left:13px;">treatment expectations</span> <br>

                <span style="padding-left:13px;font-style:italic;">Jennifer Gerdts (Canada)</span><br>

                <br>

                2. Why using standardized products<br><span style="padding-left:13px;">for food immunotherapy?</span><br>

                <span style="padding-left:13px;font-style:italic;">Stephen Tilles (US)</span><br>

                <br>

                3. Best practices for managing OIT<br>

                <span style="padding-left:13px;font-style:italic;">Pablo Rodriguez del Río (Spain)</span>

            </p>

            <p style="margin-top:30px; margin-bottom: 12px; font-size: 12px; line-height:18px;">

                Friday September 6th 2024 | 12:15 – 13:15<br>

                Padua Convention Centre | Plenary Room Mantegna

            </p>

        </td>

    </tr>

    <tr>

        <td class="text-center">

            <img src="https://i.postimg.cc/zfgsp8T1/image-2.png" alt="Event Image" width="350" height="470" class="full-width-image" />

        </td>

    </tr>

    <tr>

        <td  style="padding: 10px 0; text-align:right;">

            <p style="margin-bottom: 14px; font-size: 8px;">

                2024_059EN01_August 2024

            </p>

        </td>

    </tr>

</table>
```</div>
```</body>

</html>

Joan Hua-MSFT 1,815 Reputation points Microsoft Vendor

2024-09-05T07:22:44.31+00:00

Hi @Adina Martiniuc

Welcome to our forum!

Please kindly understand that the Outlook tag here we mainly focus on general issues about Outlook desktop client. Looks like your issue is more related to Office Development, to better solve your problem, I will add Office Development tag for you.

Thanks for your support and understanding!

Share via

is there any way i could target elements in outlook mobile in a html mail tamplate?

Your answer