I have an email template that works perfectly on non-desktop versions of Outlook. However, when rendering on Outlook it looks terrible. This part of the email is a card (it will contain several cards in the future, but for simplicity purposes I only have one here), issue is the width (on Outlook) is taking the full width available, instead of just a piece (on non-outlook the width is set to 200px (row 4)). How can I achieve the Grid view (4 cards per row) on Outlook as well (grid values on row 2):
--> <!--[if mso]>
<tr>
<td width="20px" style="background-color: #f2f2f2; margin-top: 50px; max-height: 500px;">
<![endif]-->
<a href="https://www.google.com/" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Image1" style="width:50%; border-radius: 20px;">
</a>
<!--[if !mso]>-->
<div>
<!--<![endif]-->
<!--[if mso]>
<tr>
<td class="container">
<![endif]-->
<h4><b>My Card 1</b></h4>
<p style="font-size: 15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem...</p>
<p style="font-size: 15px"><b>Date: 08/15/2023</b></p>
<p><a href="https://www.google.com/" style="font-size: 15px;">Read More</a></p>
<br><br>
<a href="https://www.google.com/">
<button style="positions: absolute; bottom: 0; background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">Register</button>
</a>
<!--[if !mso]>-->
</div>
<!--<![endif]-->
<!--[if mso]>
</td>
</tr>
<![endif]-->
<!--[if mso]>
</td>
</tr>
<![endif]-->
<!--[if !mso]>-->
</div>
<!--<![endif]-->
</td>
thank you
Try using @media screen. You can always use media queries for resizing problems on different screens. This is a good helpful site that can show you how to use them properly and how to apply them to your site. Good luck!
Using Media Queries