media queries are not supported

[00069]

Well the problem that arises, In email template i made the footer of my email and my other content is injecting through content.body, but the problem is that It's not picking my media queries on mob email clients like gmail app and apple email.

Here's the screenshot of my work.

[Anton]

Hey @00069, 

the "HTML" is not designed to be a fully "drop the whole html here" module. It's more like a "place your custom button here" module but the whole module is not longer supported by HubSpot.

My recommendation to get fully responsive emails: Stick to the dnd builder and build your emails in it or create your own HTML email templates(they don't support dnd right now)

best, 

Anton

[00069]

Thanks @Anton . I'm not dropping my whole module here only integrating my other half of the module in this template, but it's not showing the right view on mob devices. I can't make this template on dnd because I have to pass the value from my otherDB.

Although my whole template is responsive according to the email preference but while sending the email through hubspot it breaks my code on mobile devices.

[TomM2 · Accepted solution]

Hey @00069 I believe that's what Anton is trying to say. The source code in the HubSpot rich text editor is more "add a little bit of custom markup in" not a custom HTML section. IE HubSpot's DND template options will always take precedent, there's no way to overwrite these. 

They will also strip out unsupported elements like Js in emails, and I would suspect media queries. But even if your media queries aren't stripped out, they're not going to override the HubSpot email template markup. So you're going to get into a place where you're basically embedding an email inside an email template and it won't work propertly. You'd need to create a completely custom HTML template to use your own code as you can't drop custom HTML templates into a rich text editor and override the template. 

[TomM2]

Hey @00069 media queries are not supported in a huge amount of popular mail clients and aren't handled the same way in other mail clients as a browser. This is not a HubSpot issue but an issue with email client support. Designing emails is not the same as designing a web page so a lot more considerations would need to be made. With any email system you will experience this. There's a great guide from litmus on media query support in email here. 

[00069]

Thanks Tom for replying. I know many email clients don't support media queries, but Gmail App is accepting the media queries and If I send the same email from different website like sendgrid my email template looks fine on gmail app and Ios email, but that's not the same case with hubspot.