AnsweredAssumed Answered

Media queries for similar pixel widths

Question asked by jpilbeam on Dec 27, 2018

The iPhone 4 screen is 320px by 480px

The iPhone 5 screen is 320px by 568px

 

I'm using breakpoints such as this for both screen widths. 

@media only screen 
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
{
}

 

The iPhone 5 breakpoints are overriding the iPhone 4's. According to this helpful website they're not supposed to?

Media Queries for Standard Devices | CSS-Tricks 

 

My problem is that I have a splash screen with a close button that has to be situated at the bottom of the screen. So, when testing on the iPhone 4 screen with the iPhone 5 breakpoints the close button is off the screen. I'm confused as to how to fix that.

 

Edit: I need breakpoints for both screen widths to work in the same CSS style sheet.

Outcomes