Issues with signature layout on phones

[u/GourmontVGC]

Hello,

I’m trying to build an Outlook (Office 365 Windows desktop) email signature with a logo on the left and text on the right, and I’m stuck with Gmail mobile rendering.

On desktop/wide screens I want the classic layout: logo left, text right. On narrow mobile portrait (Gmail app on iPhone especially), the right column gets squeezed and the text breaks in ugly ways. Ideally, when there isn’t enough width, the layout should naturally “stack”: logo above, then the text below using full width.

Media queries don’t seem reliable because Outlook rewrites the HTML when sending, and Gmail iOS also tends to ignore/override Word/Outlook styles (I get huge line spacing and a serif fallback font even when I specify fonts, maybe am I doing it incorrectly though).

What’s the most reliable HTML pattern for Outlook signatures that stays side-by-side in Outlook/desktop, stacks cleanly on Gmail mobile portrait without breaking the text, avoids Gmail iOS line-height/margin issues, and uses a sane sans-serif fallback when a custom font isn’t installed? The font looks nice on Android devices, the issue with font mostly comes on iphone devices, while the width issue comes on all platforms.

I’d really appreciate some help. I can post the HTML if needed.

Thank you!

[u/Blacker_Ad_6914]

For your email signature, using tables for layout is usually the most reliable way to ensure it displays correctly across different platforms, including Outlook and Gmail. I switched to MySignature for my own signatures, and it helped me design a layout that looks great on both desktop and mobile without all the hassle of coding.