My stylesheet doesn't match iPhone 6 resolution. Where am I blowing it?
Head out to loosecannonfitness.com.
In an effort to ensure that my page doesn't get too big for a particular screen resolution, I went back and started to modify my stylesheet, but it's gotten out of control.
I'm looking at this: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions and trying to keep my graphics small enough where everything fits within the screen.
But, as an iPhone 6 user, my landscape resolution is way too small and I'm confident that I've allowed some basics to get away from me.
My stylesheet is located at http://loosecannonfitness.com/mobile/css/stylesheet.css.
How can I improve my "media screen and (max-width:" settings?
In an effort to ensure that my page doesn't get too big for a particular screen resolution, I went back and started to modify my stylesheet, but it's gotten out of control.
I'm looking at this: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions and trying to keep my graphics small enough where everything fits within the screen.
But, as an iPhone 6 user, my landscape resolution is way too small and I'm confident that I've allowed some basics to get away from me.
My stylesheet is located at http://loosecannonfitness.com/mobile/css/stylesheet.css.
How can I improve my "media screen and (max-width:" settings?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
One of the things that has me concerned, is that, in some instances I designed my graphics to fill the screen for, say a 430px; window. Thing is, after getting some feedback, I'm better off with a graphic that's only 375px across and that way avoid the slightest chance of my user having to contend with a horizontal scroll bar.
I then took that logic and "extended" it. As I put all this together on my desktop, I made a point of ensuring that regardless of how large or small my screen was, there was always a stylesheet available programmatically so my user was never confronted with a white screen with no background image and no real design to it.
You've seen my stylesheet and how I've attempted to accommodate different dimensions by using things like "@media only screen and(max-width:799px" thinking that I'm not "catching" anything between 430px and 800 px. Is that logic sound?