Responsive iPhone 6+ resolution

[coding_noobie]

Does anybody know what the responsive resolution should be for the iPhone 6+? I’m trying to change just one element on it but no resolution I try seems to work.

This is what I’ve got:

// iPhone 6+
@media all and ( max-width: 736px ) and (orientation:portrait) {
#menu { margin-top: 6px; }
}
// All phones landscape
@media all and ( max-width: 720px ) and (orientation:landscape) {
#menu { margin-top: 6px; }
}
// All phones portrait
@media all and ( max-width: 720px ) and (orientation:portrait) {
#menu { margin-top: -23px; }
}

[lauren_olsen17]

The resolution for the iphone 6+ is 414px X 736px, but your queries shouldn’t be targeting device size but more a screen size.

http://pieroxy.net/blog/pages/css-media-queries/test-features.html
https://gist.github.com/dustinboston/3867516

[coding_noobie]

I understand what your’s saying and have changed my code so that it’s now (min-width: 768px) and (max-width: 979px) but it’s still not working and I’m not sure why

[lauren_olsen17]

can you post your code… it’s possible that you have an extra curly brace hiding some where, or your missing one… little things like that can break your code

[RyanReese]

You shouldn’t be trying to target specific phones, or orientations. On desktop, grab your browser edge and shrink it until its phone-sized. Does it look good? Ok then you know it 's responsive and it’ll look appropriate in every phone.

[PaulOB]

@coding_noobie

// iPhone 6+

I assume you know this isn’t a css comment and will break the rule below?

// iPhone 6+

A css comments is:

/* this is a comment */

I also assume you have the correct viewport meta tag in place also.

This one:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

As Ryan said above you don’t really want to get into the game of detecting devices and orientation but should instead concentrate on how the design looks across your browser at various widths.

[coding_noobie]

@PaulOB

I assume you know this isn’t a css comment and will break the rule below?

Sorry I didn’t mean to include that bit as part of the code, sorry that was to show what I was doing

[coding_noobie]

@lauren_olsen17

can you post your code… it’s possible that you have an extra curly brace hiding some where, or your missing one… little things like that can break your code

Thanks this is what I’ve got:

@media all and (min-width: 768px) and (max-width: 979px) and (orientation:portrait) {
#menu { margin-top: 16px!important; }
}
@media all and ( max-width: 720px ) and (orientation:landscape) {
#menu { margin-top: 6px!important; }
}
@media all and ( max-width: 720px ) and (orientation:portrait) {
#menu { margin-top: -23px!important; }
}

[lauren_olsen17]

Do you need to use “!important” ? Are you overriding someone else code or just your own. The use of media queries should help with the transition of your site changing screen sizes. Also is it possible that you could send a link to your site?

[PaulOB]

Do you have the viewport meta tag in place as I asked in my previous post?

Without it in place the media queries will not take affect on mobile because they will assume 980px width.

The code you posted above is working and will work as follows:

1. The first rule will be actioned by all browsers/devices that are wider than 768px and smaller than 979px and in portrait mode.

2. The second rule will be actioned by all browsers/devices that are smaller than 720px and in landscape mode.

3. the third rule will be actioned by browsers/devices that are smaller than 720px and in portrait mode.

That means the iphone 6 will be collected by the last two rules along with any other devices that match that criteria.

If you specifically want to target certain devices then you will need device-width media queries but once you go down that road it is never ending and best avoided.

[coding_noobie]

Thanks that’s exactly what’s happening but I want to iPhone 6+ to have its own rule as it gives more space to links

[PaulOB]

@coding_noobie

Thanks that’s exactly what’s happening but I want to iPhone 6+ to have its own rule as it gives more space to links

I would hazard a guess as that is because the code you are using is not suitable for the task in hand or you have not taken control of margins and padding or are trying to cram text into a tight space.

It’s always best to resolve the issue without additional or specific targeting rules where possible.

If you really want to target the iphone 6 then use the device-width media queries I showed in my previous post. These refer to the device width and not the resolution.

However, I still think you should resolve the issue without resorting to this.

[coding_noobie]

Hmm I think you’re right about resolving the issue rather than using addition rules.

I added a ‘clear’ div above the element and that forced it to be in the place it was supposed to be.

Thanks