How to use @media query for desktop and mobile friendly emails

Question:

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;}
}
</style>

See here for info on using @madia query http://templates.mailchimp.com/development/responsive-email/

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

Answer:

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):

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

</style>
{/literal}

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

Regards,

Joel
Remarkety team

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.