Forward to friend breaks Responsive-ness

I am using CSS media queries to display a different layout for anything above 480px wide. I've rigged it so that there are two different header graphics and one of them is always hidden, depending on the size of your viewport.

It works fine if I send directly from Campaign Monitor.

But, if I use "forward to a friend," from my desktop computer and it is received by an iPhone, for some reason, it shows BOTH headers AND it displays the >480px (large) version of the design.

If I forward to a friend from the iPhone size and receive it on my desktop, it displays fine. Any idea why that is happening?

roshodgekiss roshodgekiss, 5 years ago

Hey there nate22, this is something I hope we'll look into in the near future. As it turns out, the webversion (and conssequently, F2AF) of an email campaign doesn't adapt properly when viewed in mobile device browsers. If you add the following snippet of code to your <head>, you may have better luck:

<meta name="viewport" content="width=device-width, initial-scale=1">

If you give this a shot, let us know how you go. I'm not entirely sure why in this case the display width is not being calculated correctly, but if you could let us know what media query declaration you're using, (eg. @media screen and (max-device-width: 480px;) ... ), we'll continue to look into this further. Sorry for the trouble here!

Get in touch with us on Twitter:
We're also on Facebook:
nate22, 5 years ago

Thanks, I'll give that a shot.

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free