How can I get Gmail to show only one column instead of 2 or 3 on mobile?

[msbt]

I've done my research and tried several different approaches, but the Gmail mobile apps (both, iOS and Android) don't seem to follow the media-queries to display the columns in rows instead. I even asked HubSpot support if the multi-column-templates are available to get some insights, but no dice.

For reference:

Desktop (looking good):

even Samsung Mail (!) can do it on mobile (ignore the right column at the top, that's just for testing and a different table):

And this is Gmail:

I've tried both, mobile first (both columns display block and100% width and from min-width: 480 upwards 55/45% and the other way around, but neither do work with Gmail.

Does anyone have any pointers on how to create proper HubSpot compatible responsive columns? For the record, I've built a module with a repeater which does work, but that's just because I could check the loop length before and changed the complete layout when there are more than one item, that doesn't work in this instance because there are always 2 columns in one table and not a table per item.

Best regards,

Matthias

[msbt]

Hey again, I checked the resources you posted and I'm afraid they do not cover multiple columns. Yes, they're responsive, but everything is in one column and I need something that collapses from two or more columns on desktop to one on mobile, any pointers available in that direction? The HubSpot drag & drop builder has those included and working, but the source of those is not available 😕

[msbt]

Thanks for getting back to me and sorry for the late response, have been on vacation last week.

Yes, we're using the drag & drop builder, but I built custom modules for it and most of the work because they're single column, but multi-column doesn't. Thanks for the link though, seems like this is what I've been looking for. I'll keep you posted if I don't manage to fix it 😉

Cheers, Matthias

[webdew]

Hi @PamCotton Thank you for tagging us.

Hi @msbt ,

I think you are using the drag n drop email template development. so sometimes it's creating issues on a mobile device. and this template has no option to add custom CSS. I would recommend you to create the custom email template from the design tool and add the media query according to your need. https://developers.hubspot.com/docs/cms/building-blocks/templates/email-template-markup

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[PamCotton]

Hello @msbt, thank you for sharing all the details, I will add some top experts to share their thoughts @webdew @pixl_labs @DanielSanchez any recommendations to @msbt?

Thank you!

Pam