CMS Development

EJackson23
Participant

Media queries not working on gmail mobile apps

Résolue

Media queries are not working in gmail mobile apps but the email is responsive in other apps. Below is my code for the style tag in the embedded code in design tools. Does anyone have any tips on creating responsive emails for gmail apps? Thanks for your help.

 

<style type="text/css">
@media (max-width:600px) {
.energyreportHeader {
width: 100%!important;
padding: 0!important;
}
.header-column-center {
display: table!important;
width: 100%!important;
max-width: 100%!important;
direction: ltr!important;
}
.header-column-center-td-top {
padding: 0px 0px 3px 0px!important;
}
.header-column-center-td-bottom {
padding: 0px 0px 6px 0px!important;
}
.header-column-center-td-bottom p {
text-align: left!important;
}
.resImage {
max-width: 300px!important;
width: 100%!important;
}
}
</style>

0 Votes
1 Solution acceptée
Indra
Solution
Guide | Partenaire solutions Elite
Guide | Partenaire solutions Elite

Media queries not working on gmail mobile apps

Résolue

Hi @EJackson23,

 

HubSpot has function that can add CSS to your head. But I'm not sure it will work in e-mail templates. You can give it a try and check out the function require-css.


Indra Pinsel - Front-end developer - Bright Digital
Did my answer solve your issue? Help the community by marking it as the solution.


Voir la solution dans l'envoi d'origine

0 Votes
4 Réponses
Indra
Guide | Partenaire solutions Elite
Guide | Partenaire solutions Elite

Media queries not working on gmail mobile apps

Résolue

Thanks for mentioning @Jaycee_Lewis

 

Hi @EJackson23,

 

Styling for mailing can by hard. Especially responsive. How did you add your styling to the mailing template? You need to make sure your <style> is included in the <head> will it work.

 

I also recommend checking the documentation for Gmail:


Indra Pinsel - Front-end developer - Bright Digital
Did my answer solve your issue? Help the community by marking it as the solution.


EJackson23
Participant

Media queries not working on gmail mobile apps

Résolue

Thank you @Indra. We are using "drag and drop" for this email not a template so I don't believe I can add coding to the <head>. We do have an html module we can place in a drag and drop email though so I add it to the top.

0 Votes
Indra
Solution
Guide | Partenaire solutions Elite
Guide | Partenaire solutions Elite

Media queries not working on gmail mobile apps

Résolue

Hi @EJackson23,

 

HubSpot has function that can add CSS to your head. But I'm not sure it will work in e-mail templates. You can give it a try and check out the function require-css.


Indra Pinsel - Front-end developer - Bright Digital
Did my answer solve your issue? Help the community by marking it as the solution.


0 Votes
Jaycee_Lewis
Gestionnaire de communauté
Gestionnaire de communauté

Media queries not working on gmail mobile apps

Résolue

Hi, @EJackson23 Thanks for the great question. Email template styling is definitely an art form unto itself 🪄

 

Let's see if we can get the conversation started – hey @Indra @Kevin-C do you have any experience styling email templates? Specifically for Gmail mobile apps? If not do you have any suggestions on additional details @EJackson23 might share to help us better understand?

 

Thank you very much! – Jaycee


HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !
0 Votes