How to use @media query for desktop and mobile friendly emails (V2 editor)


I am trying to make my email both desktop and mobile friendly by widely excepted best practices, but I can't add a <head> to the html, it won't save or preview when added.

Most importantly I am trying to add the @media query in CSS preferably into the <head>
Mobile mail apps will follow the @media query and desktops & browsers will ignore it. This allows for a optimised mobile email version to be realised.

However when I try to add the below into a style tag my html I get error notice Syntax Error in template "Unexpected ": ", expected one of: "}" , " " , ATTR"

Trying to add: <style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}

See here for info on using @madia query

It would be great if I could send both desktop and mobile optimised emails.


Hi Joshua,

Thank you for contacting us. I'm sure we can help you with this issue ASAP.
In order to add the <style> you just need to wrap it with {literal} smarty tag.
This code should be entered as HTML. So switch the Remarkety editor to HTML code and then use this tag.

Here is a simple example (you can add anything inside the literal tag):

<style type="text/css"> 
@media only screen and (min-device-width: 601px) { 
.content {width: 600px !important;} 


Please let me know if this helps and if you need more assistance with this matter.


Remarkety team

Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.