1

I'm currently developing an HTML email and I've written some media queries for the iPhone as follows:

/* ----------- iPhone 6+, 6S+, 7+ and 8+ --------- */
    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (orientation : portrait)
    {
        .email-container {
            min-width: 414px !important;
        }
        .email-header{
            padding: 1.2em !important;
        }            
    }

Naturally, this media query doesn't get triggered. :-)

Instead, when I add the following styling to the head, it affects the HTML:

/* Nexus 5X, Nexus 6, Nexus 6P, Pixel, Pixel XL, Pixel 2, Pixel 2 XL*/
    @media only screen 
    and (min-device-width : 411px) 
    and (max-device-width : 731px)        
    and (orientation : portrait)
    {
        .email-container {
            min-width: 411px !important;
        }

        .email-header{
            padding: 1.2em !important;
        }            
    }

From what I understand and based on a bit of research, link, link, the device dimensions for the iPhone 6+,6S+, 7+ are 414px X 736px.

Why are the media queries for 411px X 731px devices getting triggered?

Avinash D'Souza
  • 33
  • 3

1 Answers1

0

You have the widths and heights mixed a little. Try the below code

    @media only screen 
    and (max-width : 414px) 
    and (max-height : 736px)
    {
        .email-container {
            min-width: 414px !important;
        }
        .email-header{
            padding: 1.2em !important;
        }            
    }

The code looks for a max device width and max device height now with orientation as portrait. Which is what your research brought up:

From what I understand and based on a bit of research, link, link, the device dimensions for the iPhone 6+,6S+, 7+ are 414px X 736px.

Hope this answer works for you.

Syfer
  • 4,262
  • 3
  • 20
  • 37
  • Thanks for replying Syfer! That definitely moves me in the right direction... :-) The snippet you provided works for 6+ tec but interferes with 6/6S. – Avinash D'Souza Mar 06 '18 at 07:08
  • I've tried a few mods here: [GIST](https://gist.github.com/manavecplan/8301c9672051aa93c1d7be4f89d0dd53) but the logic of it is starting to to slip away – Avinash D'Souza Mar 06 '18 at 07:24
  • Your original question had issue which I have fixed and yes it will work in 6+ and not on bigger screen sizes. Reason being you are restricting to a specific device with that dimensions. I use only max width 480 and cater for others as issues start occurring – Syfer Mar 06 '18 at 08:32
  • I have updated the code above. Let me know if it works now. – Syfer Mar 09 '18 at 10:52
  • Thanks a ton, Syfer! – Avinash D'Souza Mar 18 '18 at 15:00