• robinpoort

    Great work on the new builder! Very versatile system that creates good looking newsletters. One thing though:

    Not sure if it’s just me and my colleague but when sending test mails today (to Gmail, Chrome browser, OSX El Capitan) with the new campaign email builder the width of the newsletter is messed up. I’ve tested several templates but all with the same result. The template works fine when your browser is wide enough (1180px wide) but anything below that just shows a 320 pixel wide content area (the 320px min-width) in a large background area. The width problem is being caused by the following CSS: `width: 320px; width: calc(28000% – 173000px);`. Unticking those two boxes in the Chrome inspector fixes the template properly. Not sure if this is intended but it sure looks weird since there’s enough room (something like 150px margin on each side) around the content area for the content. I’m also using Kiwi for Gmail and the width styling is even more broken there then on the original gmail client.

    I just sent out a newsletter with one of our own old templates because I didn’t want to use the broken new one. Can you tell me if the problem I described above is a bug or a feature? Thanks!

  • Kim

    Hi Robin,
    I think it would be best if you contact our awesome Support crew so they can help you through this: https://help.campaignmonitor.com/contact

  • robinpoort

    Hi Kim,

    Thanks for the quick reply. I just sent the support team an email! :)

  • Stig Morten Myre

    Hey, thanks for the feedback! It sounds like what may be happening here is that the email viewport width in Gmail is less than the minimum width required for the desktop version to kick in.

    Because Gmail doesn’t make use of the full width of the browser window, it’s still possible to get the mobile version in a desktop browser even if Gmail should have been able to fit the desktop version in there. If you increase the browser window slightly, do you then see the desktop version?

    We’ve written more about the inner workings of this new version of the template at https://medium.com/p/1513ac4673e

    For a bit more technical background, a the version we initially released actually used vw units for the calc(…) function you mentioned, in order to switch between the desktop and mobile versions based on the full browser viewport instead. But as it turned out, the Gmail app on Android 5 didn’t handle this properly, so we switched to using %.

    We’ve made note of your feedback here, and will look into whether we might make some tweaks to make the mobile version less likely to appear in Gmail’s webmail. If you have any additional details on what you’re experiencing, it would be great if you can pass them on to our support team. Thanks again!

  • robinpoort

    Hi Stig,

    Thanks for the reply. The reason Gmail behaves like this is because the templates parent wrapper stays 615 wide until the browser is 1180 pixels wide. This in turn makes that `calc()` calculation result in `-800px` which let’s the `min-width: 320px` kick in. Might it be wise to have the following CSS? `min-width: 320px; width: 90%; max-width: 600px;`. At least for the one-column layouts? That’ll make the layout responsive while keeping some margin on the side. Multiple colums could be calculated in a similar way I think.

    Anyways, I, of course, have no idea about the complexity behind the different templates and their multiple column layouts so the above might not apply. I’ve sent a mail to support. We can continue there :-)

  • robinpoort

    Hi Stig,

    After some testing I realized this is not easily possible for multi-column layouts. However it is possible for one column layouts. It would be possible to make an exception for this but I also get that whenever you start mixing one-columns with multiple columns you will get strange looking emails on certain screen sizes. Let’s just hope you guys can find some ingenious solution for the already ingenious solution you thought of before! :-)

  • Stig Morten Myre

    Thanks Robin! Definitely a few things for us to keep investigating there. If we do come up with an improvement that works for this scenario, we’ll be sure to add it to the template for everyone.

  • robinpoort

    Ok I couldn’t leave it alone. I think I found the solution although I’m not entirely sure how this would work with all the other email clients as you described in your medium post. That’ll be up to you to test and decide :-)

    Anyways take a look and see if this helps you! http://codepen.io/robinpoort/pen/AXbQQA

  • Kathryn Taylor

    Do I actually need to create a new campaign to take advantage of these features or can I duplicate a sent campaign? That’s usually what I do to prevent starting from scratch on color scheme, etc…

  • Barbara Pilgrim

    I wish you had waited a bit longer to tell us about this! It doesn’t seem to have been tested thoroughly. I have tested in Gmail on a large iMac screen and the email is displaying in a wide frame with text in one long narrow column to the left with a big empty space to the right. It seems text is not reflowing correctly for large screen display.

  • Chris Wright

    Hi Kathryn,

    As long as you go into the Email Builder to edit the duplicated campaign, it should get upgraded to the mobile-first template.

  • Chris Wright

    Hi Barbara,
    Thanks for your response, our support team will be be happy to investigate your large screen Gmail issue:
    https://help.campaignmonitor.com/contact

  • Barbara Pilgrim

    Hi Chris,
    Thank you for your message. I have been helped by your support team. I sent screenshots to show the problem I was seeing. I have now discovered that my Gmail screen was not displaying at zoom 0. Thanks to the tip below, it has now refreshed to display correctly. I’m sure it is impossible to allow for every users onscreen settings but at least if any clients call me with the same problem, I will know what to suggest. Thanks or the support – always quick and very helpful.
    > Make sure zoom is at 0. On a Mac this can be done by holding the Command button + 0 at the same time.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

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