iPhone uses smallest media query - html

Question

I am new to making responsive websites and from what I have discovered is that you can make a responsive website in 2 different ways, the first is by making everything fluid or like I have done, creating #media screen only and (min-width: 640px) { for a variety of window sizes (max-width: 639px, min-width: 640px, min-width: 760px, min-width: 1020px and min-width: 1280px).
With each of these media queries I have designed the website to suit certain devices in mind, for example 640px is aimed for iPhone. However when uploading the website and viewing it on my iPhone the page was really messed up with scaling all wrong which lead to adding <meta name = "viewport" content = "width = device-width"> but this has lead to my website showing the smallest media query on my iPhone. I can't get the website to display properly on my iPhone with the right media query but on my laptop when I adjust the window size the website changes appropriately.
What am I doing wrong?
The page can be seen here, ivybridgemethodistchurch.co.uk/DEV/index.html.
#media only screen and (max-width: 639px) {
#wrapper {
}
#ne_wrapper {
width: 500px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.ne {
width: 100%;
height: 130px;
overflow: auto;
margin-top: 20px;
background: #FFF;
position: relative;
}
.ne img {
width: 130px;
margin: 0;
float: left;
position: absolute;
z-index: 100;
}
#ne_tag {
padding: 5px 0;
margin: 0;
position: absolute;
z-index: 200;
top: 0;
left: 0;
background: rgba(67, 149, 142, 0.85);
}
#ne_tag small {
color: #FFF;
margin: 0;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
#ne_container {
width: 330px;
margin: 20px;
float: right;
}
#ne_title {
margin-bottom: 10px;
}
#te_wrapper {
width: 500px;
margin: 40px auto;
padding-left: 20px;
padding-right: 20px;
}
.te {
width: 500px;
height: 500px;
padding: 0;
position: relative;
overflow: auto;
}
.te img {
width: 100%;
position: absolute;
z-index: 100;
}
#te_container {
margin: 10px;
float: left;
position: absolute;
z-index: 200;
}
#te_title {
float: left;
padding: 15px;
background: #FFF;
}
#te_title h1 {
float: left;
}
#te_details {
float: left;
padding: 15px;
background: #FFF;
}
#te_tag {
float: left;
clear: both;
padding: 5px 0;
margin: 0;
background: rgba(67, 149, 142, 1);
}
#te_tag small {
color: #FFF;
margin: 0;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
#te_description {
display: none;
}
#pe_wrapper {
width: 500px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.pe {
width: 100%;
overflow: auto;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #FFF;
}
.pe img {
width: 100px;
float: left;
margin-right: 10px;
}
#pe_container {
width: 350px;
overflow: auto;
float: right;
padding: 20px;
background: #FFF;
}
#pe_title {
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #DDD;
}
.no_1 {
margin-top: 20px;
}
}
#media only screen and (min-width: 640px) {
#nav {
width: 100%;
height: 55px;
background: red;
border-bottom: 1px solid #DDD;
position: absolute;
}
#outer {
top: 55px;
width: 100%;
position: absolute;
}
#wrapper {
}
#ne_wrapper {
background: purple;
width: 600px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.ne {
width: 100%;
min-height: 150px;
overflow: auto;
margin-top: 20px;
background: #FFF;
position: relative;
}
.ne img {
width: 150px;
float: left;
position: absolute;
z-index: 100;
}
#ne_container {
width: 410px;
margin: 20px;
float: right;
}
#ne_title {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #DDD;
}
#ne_tag {
padding: 5px 0;
margin: 0;
position: absolute;
z-index: 200;
top: 0;
left: 0;
background: rgba(67, 149, 142, 0.85);
}
#ne_tag small {
color: #FFF;
margin: 0;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
#te_wrapper {
width: 600px;
height: auto;
margin: 40px auto;
padding-left: 20px;
padding-right: 20px;
}
.te {
width: 600px;
height: auto;
padding: 0;
position: relative;
overflow: auto;
}
.te img {
width: 350px;
float: left;
position: relative;
}
#te_container {
width: 250px;
margin: 0;
float: right;
position: inherit;
}
#te_tag {
padding: 5px 0;
margin: 0;
position: absolute;
z-index: 200;
top: 0;
left: 0;
background: rgb(67, 149, 142);
}
#te_tag small {
color: #FFF;
margin: 0;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
#te_title {
width: 220px;
float: left;
padding: 15px;
background: rgba(255, 255, 255, 0.95);
}
#te_title h1 {
float: left;
}
#te_details {
width: 220px;
float: left;
margin-top: 1px;
padding: 15px;
background: rgba(255, 255, 255, 0.95);
}
#te_description {
display: none;
}
#pe_wrapper {
width: 600px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.pe {
width: 100%;
overflow: auto;
margin-top: 20px;
background: #FFF;
}
.pe img {
width: 120px;
float: left;
}
#pe_title {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #DDD;
}
#pe_container {
width: 440px;
margin: 20px;
float: left;
}
}
#media only screen and (min-width: 760px) {
#wrapper {
}
#ne_wrapper {
width: 720px;
}
#ne_container {
width: 530px;
}
#te_wrapper {
width: 720px;
margin-bottom: 20px;
}
.te {
width: 720px;
}
#te_container {
width: 370px;
}
#te_title {
width: 340px;
}
#te_details {
max-width: 340px;
}
#pe_wrapper {
width: 720px;
overflow: auto;
}
#st {
width: 350px;
float: left;
}
#nd {
width: 350px;
float: right;
}
.pe {
width: 350px;
height: 457px;
position: relative;
}
.pe img {
width: 350px;
}
#pe_container {
width: 310px;
margin: 10px;
padding: 10px;
height: auto;
position: absolute;
bottom: 0;
background: #FFF;
}
}
#media only screen and (min-width: 1020px) {
#wrapper {
width: 980px;
margin: 0 auto;
}
#ne_wrapper {
width: 910px;
float: left;
}
.ne {
width: 700px;
background: transparent;
border-left: 10px solid rgb(67, 149, 142);
}
#ne_inner {
margin-left: 20px;
}
#ne_tag {
display: none;
}
#ne_container {
width: 490px;
min-height: 110px;
background: #FFF;
padding: 20px;
margin: 0;
}
#te_wrapper {
width: 940px;
}
.te {
width: 740px;
}
#te_container {
width: 340px;
padding: 20px;
background: #FFF;
}
#te_title,
#te_details {
margin: 0;
padding: 0;
}
#te_title {
padding-bottom: 10px;
border-bottom: 1px solid #DDD;
}
#te_details {
padding-top: 10px;
}
#pe_wrapper {
width: 940px;
clear: both;
}
#st,
#nd {
width: 100%;
float: left;
clear: both;
}
.pe {
width: 300px;
height: 405px;
float: left;
background: #FFF;
}
.pe img {
width: 300px;
}
#pe_container {
width: 260px;
}
.no_1,
.no_2,
.no_4,
.no_5 {
margin-right: 20px;
}
}
#media only screen and (min-width: 1280px) {
#wrapper {
width: 1120px;
margin: 0 auto;
overflow: auto;
}
#ne_wrapper {
width: 1090px;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
float: left;
padding-bottom: 20px;
}
.ne {
width: 730px;
}
#ne_container {
width: 520px;
}
#te_wrapper {
width: 1120px;
}
.te {
width: 1120px;
height: 360px;
position: relative;
}
.te img {
width: 360px;
position: absolute;
z-index: 100;
}
#te_container {
width: auto;
position: absolute;
z-index: 200;
top: 20px;
left: 350px;
margin: 0;
padding: 0;
background: transparent;
}
#te_tag {
background: rgb(67, 149, 142);
}
#te_title {
width: auto;
max-width: 730px;
overflow: auto;
float: none;
padding: 20px;
margin: 0;
margin-top: 28px;
background: #FFF;
border-bottom: 1px solid #F4F1EB;
}
#te_details {
float: none;
overflow: auto;
padding: 20px;
margin: 0;
background: #FFF;
border-bottom: 1px solid #F4F1EB;
}
#te_description {
display: block;
width: 730px;
position: absolute;
z-index: 200;
margin: 0;
padding: 20px;
background: #FFF;
}
#te_description h5 {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#pe_wrapper {
width: 1120px;
margin: 0 auto;
clear: both;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
#st,
#nd {
width: 100%;
float: left;
clear: both;
}
.pe {
width: 360px;
height: 480px;
}
.pe img {
width: 360px;
}
#pe_container {
width: 300px;
margin: 20px;
}
.no_1,
.no_2,
.no_4,
.no_5 {
margin-right: 20px;
}
}
#media only screen and (min-width: 1360px) {
}

Answer 1

Your media queries are not correct
#media only screen and (max-width: 639px) { }
#media only screen and (min-width: 640px) { }
#media only screen and (min-width: 760px) { }
#media only screen and (min-width: 1020px) { }
#media only screen and (min-width: 1280px) { }
#media only screen and (min-width: 1360px) { }
This will result in applying styles of #media only screen and (max-width: 639px) { } because all other media queries are overridden by it as you have given min-width to all queries, thus it takes lowest min-width and applies it for all sizes.
Change it to
#media only screen and (max-width: 639px) { }
#media only screen and (min-width: 640px) and (max-width: 759px) { }
#media only screen and (min-width: 760px) and (max-width: 1019px) { }
#media only screen and (min-width: 1020px) and (max-width: 1279px) { }
#media only screen and (min-width: 1280px) and (max-width: 1359px) { }
#media only screen and (min-width: 1360px) { }
To explain you media queries in detail, refer css getting changed when applying css media queries for responsive design
I will also put some part of that answer here for further reviews of this post.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
Example
#media all and (min-width: 500px) {
}
#media all and (max-width: 500px) and (min-width: 300px) {
}
#media all and (max-width: 299px) {
}