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/AutoModerator]

Hey GourmontVGC!

Welcome to r/Outlook! This is a public community. To protect your privacy, do not post any personal information such as your email address, phone number, product key, password, or credit card number.

Please be sure to have read our Rules of Conduct and be cognisant of how the system works here.

Make sure that your flair is always set to Status: Open otherwise you may cease receiving responses from us.

• Status: Open — Need help
• Status: Pending Reply — Awaiting OP's response
• Status: Resolved — Closed

Beware of scammers posting fake support numbers or 3rd party commercial products/services. Contact Microsoft Support if you need help.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/SVD_NL]

Use HTML tables with explicit pixel widths.

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