I’m working on a responsive html email template. A lot of email browsers will only read inline styling, but I find it really hard not to make mistakes working with that kind of code, so I’ve developed a workflow where I write my HTML with an embedded CSS stylesheet, then run that code through Premailer, which moves the styling inline for me. Pretty sweet!
In this case as I’m making a responsive template I’ve run all but the media query through premailer, then pasted it within <style> tags in the head of the document so that the design can remain responsive in email browsers that do pay attention to this part.
Hi cheli. Firstly, well done for setting this up so well to make the situation clear and easy to assess. (It’s rare to see it so well done. )
From looking at it, it seems that in the working version, you have id="contentWrapper" on the surrounding <table> that sets its width to 320px, while this is not replicated in the version that’s not working. So you could do something like this:
Hm, now I realize that this messes up the larger version of the layout. Since you still have @media rules, perhaps just replace the id attribute on the table that seems to have gone missing.
[edit]Yes, tested that, and it’s what I should have suggested first up. Just replace the missing ID:
Hi ralph.m, you come to my rescue again! I’m very glad you found my explanation clear - I know it’s hard to explain things sometimes so I’m glad it wasn’t too garbled
Replacing the ‘contentWrapper’ ID works on my end too - I’ve even realised why it happened too so I think we can declare this case solved!
In Premailer, you can ask it to remove unused IDs when converting to inline styles. I’d checked that option; forgetting that with the media query removed, the ‘contentWrapper’ ID suddenly appears unused. Yay for easy and simple fixes
)