Responsive Email Template - Resizing text in Landscape mode

[Anonymous]

It took me a while to get Gmail's limitation through my head, but I've finally gotten a nice Responsive email template built. I've checked out some of the ones available at templates.marketo.com  Now I'm doing a bit of testing, things look great, but when I view the email on my iPhone in landscape mode (horizontal) i'm not happy. 

@media (device-width: 320px) and (orientation: landscape)  doesn't help me. I've used a bunch of different device widths. I've set max-widths. 

Anyone got a good fix for iPhone landscape mode? (I'm lookin at you Edward U)

[Anonymous]

An untested suggestion for iPhone:

@media

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-resolution: 192dpi) {

  body {

    <!— something —>

  }

}

A permanent fix can be requested through http://templates.marketo.com/get-help/

The design team tends to be quick.

[Anonymous]

Thanks for chiming in Breno. This didn't do what I wanted it to do. I'm curious if anyone else has any fixes for this. I'd assume that if it was easy to do, the templates on the mkto template site would already have the feature incorporated. 🙂 But I'll ask. 

[Anonymous]

What seems to be the problem? In landscape mode, the width is 480px, not 320px. Tried working with that?

[Anonymous]

Ya, I'd done a few things. One place I saw said that they pixel display is still 320. I changed the media query to 479 from 480, no change. 

[Anonymous]

Got a response from design. 

iPhone 2G to 4S in landscape

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) 

and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 5 in landscape

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 568px) 

and (orientation : landscape) { /* STYLES GO HERE */}

This worked out well. I moved these underneath the portrait declaration, it only adopts these in landscape. 

Now to start QA on multiple email clients.

[Pierce_Ujjainw3]

Imagine if you never had to worry about this kind of coding again?

Well, that is what Knak is for. We take the coding guesswork out of responsive design emails and landing pages for Marketo. We also test using Litmus across over 30 email clients and devices.

Build your first template, free and see for yourself. Since we launched at last week's Marketo Summit, we have over 100 Marketo users using Knak to build responsive email templates.

www.knak.io