Why wont my email stay responsive after editing as a template?

Hi,

I have created a responsive template design. Which can be viewed here. http://www.wearerare.com/test/email/email_cm.html This (as you can see when you resize the window width) responsively scales and reflows the content.

However, when I add this to Campaign Monitor as a new template and preview after editing/send it it removes the responsive side of the html. It is working fine when previewed before editing and is still even responsive while editing.

Can someone please help?

Thanks,

James

roshodgekiss roshodgekiss, 3 years ago

Hi there James, I just had a play around with the code and found the reason why the previews and test emails are turning out different is because of the way the media query you have is interacting with the inlined CSS code. The easiest way to fix this is to add !important; to the CSS styles in your media query, ie:

@media only screen and (max-width: 480px) {
/* Styles */
.col {
    float: none !important;
}
.section {
    margin: 0 auto !important;
    height: auto !important;
}
.span_1_of_2 {
    width: 100% !important;
    
}
.span_2_of_2 {
    margin-top: 5px !important;
    width: 100% !important;
    height: auto !important;
    /* You can even add clear: both; if you're getting stuck */
}
...
}

Once you do this, then things should work beautifully. It's a great hybrid fluid/responsive layout you've got there, but be careful with the use of <div> - some email clients like Outlook don't respect width (or margin, for that matter). If you run into any big jams, we'd recommend using tables instead. Best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
RAREemailer RAREemailer, 3 years ago

Hey Ros

Sorry for the late reply, I have been snowboarding in the Alps :-p. Thanks for the info, I have now changed the whole template to tables, but am now having responsive issues. The columns are stacking left and not changing to fill 100% for mobile. Would you mind having a gander and giving me some pointers please. :)

http://www.wearerare.com/test/email/email_cm_tabled.html

Thanks,

James

RAREemailer RAREemailer, 3 years ago

Scrap that, I found some rogue code that was screwing with my template. Watch this space ;)

roshodgekiss roshodgekiss, 3 years ago

Thanks for the update, RAREemailer - let me know if I can help out here :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098