Hi i set some @media style for mobile for emails in magento (i added style in email header head section, in email header body section, in email-inline.css , in email-non-inline.css) but when mail sent to gmail or outlook or any other the responsive define in @media is not showing in any mobile devices it avoided @media css but when i preview email templates at admin transnational email section it looks ok with all screen.

Please help me to add responsive css For mobile devices for example i want to hide some text after all media less than 600px. I am using @media only screen and (max-width:599px) {} also tried with @media only screen and (max-width: 599px), screen and (max-device-width: 550px) and @media only screen and (max-width: 599px) but no success.

1 Answer 1


Responsive design in email clients is very limited. Gmail in browser on mobile only accepts styling directly inside style attribute (not style tag). Gmail mobile application requires styling to be placed in style tags either inside head or inside body. New versions of Gmail support media queries, but old ones do not.

Litmus blog post about media queries

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.