Reply
Occasional Participant
JamieP2
Posts: 3
Registered: ‎12-21-2011

Mobile targeted CSS problem

Hi quick question,

 

I've been trying to integrate in some mobile specific CSS into a recent newsletter, but when I try to add the code I get an error returned telling me "an unknown error has occured" and that I need to contact customer service.

 

Below is a small snippet of code I'm trying to use;

 

   <style>

    @media only screen and (max-device-width: 480px) {
         div[class="body"] {
              font-size: 15px;
         }

    }

   </style>


I suspect that either you don't support for the "@media" tag or else there are invalid characters in place that are creating errors. Is there a known work around so that I can add in mobile targeted CSS to a newsletter?

 

thanks a lot,

 

DaveBerard
Posts: 1,647
Topics: 7
Kudos: 62
Solutions: 61
Registered: ‎06-19-2008

Re: Mobile targeted CSS problem

[ Edited ]

I don't believe this is an API related question, or maybe it is and you're using the API to create these campaigns, but the answer is that the @ symbol is not supported by us in our custom code creation flow.  For a full list of what we do support, which is a subset of HTML/CSS that is commonly supported in email clients, see our Advanced Users Guide.  While I do believe that @ styles are supported in many mobile devices, they are also not historically supported by many desktop email clients and web email clients. 

 

I'll forward this on to our development team to look at for a possible feature enhancement for our product.  We will need to do extensive testing to see how this affects emails which are rendered in common email clients such as Outlook, Gmail and Hotmail as well before we would add support for these types of tags.  Please note, since the parameters you're using are also still part of a CSS3 candidate recommendation and not yet a finalized standard, it will probably not be immediate that we'd look into adding support for those features.

Dave Berard
Senior Product Manager, Constant Contact
Occasional Participant
JamieP2
Posts: 3
Registered: ‎12-21-2011

Re: Mobile targeted CSS problem

Thanks for replying so quickly, Dave.

 

Its unfortunate because the @media tag is a standard used to target content to smaller screens for phones and tablets. It doesn't make any impact regular email clients at all. I feel like I'm being left behind since MailChimp and Campaign Monitor already support the use of the @media tag in custom emails.

 

I'd love to be able to tailor newsletter content to our recipients, but right now we can't. It's 2012, I feel like this shouldn't be an issue anymore.

 

Thanks.

DaveBerard
Posts: 1,647
Topics: 7
Kudos: 62
Solutions: 61
Registered: ‎06-19-2008

Re: Mobile targeted CSS problem

I did some research with our engineering teams to try to find a solution for you and did come across something that may work.

 

If you use custom HTML instead of XHTML, you can add a <head><style></style></head> section to your HTML email.  This will allow you to add the @media tags to the top without getting parsing errors.  While this will not inline any of your CSS and may cause issues with any email clients that don't support <style> tags and require inlined styles, I doubt that will be a problem if you feel that mobile is a major target area for you.  There is no way to cover all email clients though with @medai tags, it comes down to a decision of do you think more people will be using mobile clients or desktop/web clients over which method you'd want to use.

 

Hope this helps.  I did also confirm that we are looking into this for our next generation editing experience and will be doing lots of research into which clients support which tags. 

Dave Berard
Senior Product Manager, Constant Contact