0

I have looked all over for an answer for this. I'm using Mailchimp to compose an email campaign. I have some custom CSS with a media query for mobile styles. The problem is that Gmail is not recognizing the media query. Other mobile email clients are, but Gmail is not.

I have reached out to Mailchimp support and received no guidance. I have looked on StackOverflow and other articles and tried to implement the ideas shared. I have had no luck.

Any help is appreciated. Thanks

Here is the CSS for my email:

I have tried by attribute selector and class but both are not working.

<style type="text/css">
.top-container img {
    display: inline-block;
    margin-right: 30px;
    }
   .content {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    margin-top: 40px;
    width: 60%;
    }
   .content p {
    text-align: left;
   }
   @media only screen and (max-width:600px) {
    .content {
    width: 100%!important;
    }
    .content p {
    text-align: center;
    }
    .top-container img {
    margin-left: auto;
        margin-right: auto;
        display: block;
    }
   }
</style>

I want to write media query for making some text and images center by making full width in mobile view.

Umang Patel
  • 13
  • 2
  • 6
  • @media is not supported in all mail clients. Google for "css email client support". Be aware it will break your heart. – tom Aug 21 '19 at 08:06
  • I have done review that post and then tried by both attribute selector and using class but not worked for me. – Umang Patel Aug 21 '19 at 11:27
  • Any chance you can post your entire head section or even better, your entire template code? I've seen this issue with Google Fonts loading in the past, so would be good to see what else could be causing this in your code. –  Aug 21 '19 at 13:28
  • @kmgt media query is supported and works. Umang, try the code that is in the duplicate, you will see it works. Maybe take that code and build it off that? – Syfer Aug 23 '19 at 00:50
  • I have follow the below link to create new responsive email template. https://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/ It works in mobile responsive as well as in desktop version. Thank you for your great support. – Umang Patel Aug 29 '19 at 09:02

1 Answers1

0

@media screen and (max-width:767px){}

Try this one work for me

DesignerWWT
  • 23
  • 1
  • 8
  • I have tried that also without making any space. But still not working. I have read one post. https://developers.google.com/gmail/design/reference/supported_css – Umang Patel Aug 21 '19 at 11:26