Responsive Email Template - Resizing text in Landscape mode

Anonymous
Not applicable

Responsive Email Template - Resizing text in Landscape mode

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)
Tags (1)
6 REPLIES 6
Anonymous
Not applicable

Re: Responsive Email Template - Resizing text in Landscape mode

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
Not applicable

Re: Responsive Email Template - Resizing text in Landscape mode

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
Not applicable

Re: Responsive Email Template - Resizing text in Landscape mode

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

Re: Responsive Email Template - Resizing text in Landscape mode

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
Not applicable

Re: Responsive Email Template - Resizing text in Landscape mode

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
Level 9

Re: Responsive Email Template - Resizing text in Landscape mode

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