CODEWITHSUNDEEP
cssresponsive-designhtml-email
user2075009
user2075009

Reputation: 17

Issues with responsive design email template (css and inline styles conflicting)

I'm having some issues with css and inline styles on an email campaign I'm doing.

Firstly I ended up cheating a bit in that I was hiding elements (display:none;) to make them appear in the right order when using the @media css. The issue here was when displaying on a desktop isp (gmail) it ignored the (display:none;) and ended up showing double content in places. So to the double content disappear I used (display:none !important;) which then affected the mobile version.

There are some mobile templates I've seen online which don't appear to have had much testing as they simply do not work across multiple mail clients.

The code is here if anyone has any suggestions or help http://www.makeyourownmarket.com/test/test-doc.html

Upvotes: 0

Views: 5750

Answers (3)

samanthasquared
samanthasquared

Reputation: 1937

Some tips for responsive emails:

  • Put your !important declaration on all of your @media only screen and (max-width: 480px) CSS

  • Think of workarounds, if display:none; isn't working, try width:0;height:0; on your inline CSSand then override with width:100px !important;height:100px !important; in your mobile styles

  • You will need to do extensive testing, having an account/device for all the significant email clients is the best, but http://www.emailonacid.com works in a pinch.

Upvotes: 5

dinodsaurus
dinodsaurus

Reputation: 5095

I dont think responsive design is the right way for emails. Usually emails are made inside the table because of many mail clients. You could find more about this here Nettuts

Upvotes: -2

Billy Moat
Billy Moat

Reputation: 21050

I'd recommend doing a little more research into HTML emails and their limitations.

This article is a good starting point: http://kb.mailchimp.com/article/how-to-code-html-emails

Some tips:

  • Don't place CSS in a STYLE tag as this won't work across all email clients.
  • Use inline CSS only
  • Use Tables for layout
  • I would be very surprised if media queries would work consistently in email clients. I'd avoid trying to use those and instead concentrate on creating a basic, solid email template which displays consistently across the most popular email clients.

Upvotes: 4

Related Questions