Responsive Email Template - Resizing text in Landscape mode | Community
Skip to main content
A
Anonymous
December 18, 2013
Question

Responsive Email Template - Resizing text in Landscape mode

  • December 18, 2013
  • 6 replies
  • 1508 views
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)
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

6 replies

A
Anonymous
December 18, 2013
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.
A
Anonymous
December 18, 2013
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. 
A
Anonymous
December 19, 2013
What seems to be the problem? In landscape mode, the width is 480px, not 320px. Tried working with that?
A
Anonymous
December 19, 2013
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. 
A
Anonymous
December 20, 2013
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.

P
pierceu25628284
Level 7
April 17, 2015
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
Terms & ConditionsAccessibility statement

Loading footer...