I have a red breakpoint at 700px for my primary design.

I have a second breakpoint at 414px, for a modified design for the iPhone 6s Plus when held in portrait mode.

At the 700px breakpoint, the design consists of a single row (full-width row) broken into two columns (6 spans each) which display side-by-side. Each column contains a single image.

At the 414px breakpoint, the design is modified so the two columns stack (via changing them to 12 spans each).

It can't really get much more basic than this, in terms of responsive design, but this doesn't work on the iPhone (iPhone 6s Plus, for this purpose, but this issue is consistent across all iPhones depending on the breakpoint values).

When I view this design on and iPhone 6s Plus (which has a screen width of 736px...bigger than my primary 700px breakpoint), I should get the two images (columns) displayed side-by-side. But, this is not the case. When you view it on-device, the two images (columns) are stacked.

Can anyone explain what I'm doing wrong?

RED project attached.

Thanks,
Kristin.

Hey Kristin,

I just responded to your support question on this issue, and I think I see where the confusion is coming from.

When using Landscape mode, you are receiving a zoomed in version of the lower breakpoint and not the 700px breakpoint. It is just is how Apple has setup the iPhone landscape view to work. It is also why Litmus does not have a Landscape option as it is the same breakpoint for portrait view.

You can learn more here https://litmus.com/blog/iphone-6-what-e … ed-to-know

Hey Adam,

Just to further expand on this (in the hopes that it'll help out/inform other RED users out there), as per our continued conversation via support—it turns out that assumption isn't correct, at least with regards to viewing output from RED on an iPhone in landscape mode. When viewing a layout exported from RED, in landscape mode, it does not show a zoomed-in version of the lower breakpoint. To show this, I built the following example (for which I've attached both the RED project file, and the html file exported from RED) with a basic, responsive design:

- A red breakpoint at 600px.
- A lower breakpoint at 415px.
- At the 600px breakpoint, the layout consists of is a single, full-width row split into two even columns (6 spans each). Each column consists of an image followed by red text set at 30pt.
- At the 415px breakpoint, the layout is modified so that the columns stack (via 12 span conversion per column), and green text is reduced to 10pt.

That's it. Nothing special going on here.

Based on the idea that the iPhone displays a zoomed-in version of the lower (415px) breakpoint, when viewed in landscape mode, I should never see 30pt, red text. But, that's not the case. The results, when generated from RED, when viewed in landscape mode on the iPhone, are broken. Text size and colour are now 30pt in red, but the columns remain stacked. This is not right. It's a combination of the text styling from the 600px breakpoint, and column layout from the 415px breakpoint.

So, it's definitely not displaying a zoomed-in version of the lower (415px) breakpoint, as you suggest.

Unless I'm doing something wrong in RED, which I don't think I am, then this is a bug in the code being generated by RED and means it's impossible to produce a functional design for some iPhone devices when held in landscape mode. Currently, this bug means any designs with a primary breakpoint of 667px or greater will appear broken on the following iOS devices, when viewed in landscape mode:

- iPhone 6
- iPhone 6 Plus
- iPhone 6s
- iPhone 6s Plus

Until this bug is resolved, the only semi-workaround I've found is to restrict the issue to "Plus" models by restricting the primary design to a minimum 668px (1px larger than the iPhone 6/6s in landscape mode, which is 667px). This 668px design will be what people see on tablets and desktop computers. Then, create your lower breakpoint at 667px. This forces the iPhone 6s (and all iPhones before it) to only display the lower breakpoint design.

While not ideal, it at least allows you to restrict the bug to a low number of devices, when held in landscape mode (further lowering that number, since the email displays correct in portrait mode). I don't have actual number of the % of people opening emails on iPhone 6 Plus/6s Plus devices in landscape mode, but I would have to assume these devices represent a very, very low % of opens. Using this semi-workaround, you can at least go into projects armed with this knowledge and you can inform your clients that this extremely limited number of devices won't display your email correctly. For us, this should allow us to keep using this amazing software as part of our email campaign workflow! I think that's as best as we can hope until this bug is fixed.

I hope this information helps out fellow RED users out there!

Thanks,
Kristin.

A quick follow-up on this as I was finally able to test this on a few different Android devices and I'm happy to say, this issues does not affect Android devices (at least the ones I've tested)! When viewing the email in portrait mode on Android, I get the 415px design. When I rotate the Android device to landscape mode, I get the full 600px design. So, that's great news because it means this issue really can be restricted to a very very low % of campaign opens!

Wait... RED doesn't show up correctly on iPhones? I was planning to purchase the Responsive Design Kit this afternoon while its on sale for FOJ, but now I'm having second thoughts. More than 50% of smartphone users have iPhones (700 million sold as of March 2015). If RED doesn't work correctly with iPhone, this isn't a glitch, this is a deal breaker.

RED works amazingly well with the iPhone. All our emails we send were created with RED.

RED does work amazingly well with the iPhone...it's by far the best responsive email design software I've used...but, you just need to be aware of the issue in the current version that affects designs on iPhones when viewed in landscape mode. I wasn't aware of this issue and wasted many hours (including working with RED support, which did everything they could to help) trying to figure out what I was doing wrong, but in the end, there's absolutely nothing we could do to get it to work. But, if you follow my workaround, then you can restrict this issue to an extremely low percentage of mobile opens (iPhone 6 Plus/6s Plus devices only when viewing in landscape mode).

For us, I'm really hoping this won't be an issue for our clients going forward (just something we'll have to deal with on a campaign-by-campaign basis) as, for me, the pros of RED by far outweigh the cons.

Hello,

I'm discovering this same issue regarding iphone portrait v. landscape. Specifically, the issue I'm having are showing with borders on photos. Some photos are stacked (6 spans) for phone breakpoint at 421. For portrait iphone viewing, everything is as it should be. Turned to landscape and some photos (12 spans above and below breakpoint) are displaying above breakpoint, while some photos (12 spans stacked below BP, and 6 spans, 2 columns above BP) are displaying 12 spans stacked as in below breakpoint BUT borders are displaying as above BP.

I attached some portrait v. landscape pics for reference - I'm sure I messed up my description In the img 4766, the photo is 100%, but below the breakpoint, it should be 80% and is displayed at 80% when in portrait mode.

Thanks,
John