Position of element different on desktop vs mobile
Question
So I have my media queries set to have an element positioned "X" pixels relative from the previous element at a min-width of 756px (the resolution of my iphone 6S). On my windows desktop, I positioned the element to where I want it to be. However, when I open the site up on my iphone (using the default Safari browser), the element is off by over a hundred pixels! The element is positioned higher on my iphone than it shows on my desktop. Any ideas? I checked my zooms on my desktop browser and they are all set to 100%.
edit: Here is a fiddle mockup of my code. https://jsfiddle.net/8f6y1pdx/1/
<header>
<div id = "navContainer"><h1>Hello</h1></div>
<div id = "backgroundImage"><img src = "http://cdn.wallpapersafari.com/4/18/laMvrx.jpg" width = "2560" alt = "bg image"></div>
</header>
<body>
<div id = "contentOneContainer">Container one</div>
<div id = "contentTwoContainer">Container two</div>
</body>
and the css
html, body{
padding: 0;
margin: 0;
}
#navContainer{
position: fixed;
z-index: 0;
width: 100%;
background-color: black;
color: white;
height: 100px;
text-align: center;
}
#backgroundImage{
position: fixed;
z-index: -2;
}
#backgroundImage img{
width: 100%;
max-width: 2560px;
}
#contentOneContainer{
width: 100%;
height: 500px;
background-color: blue;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
#contentTwoContainer{
width: 100%;
height: 250px;
background-color: gray;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
/*----------------------------------*\
Responsive
\*----------------------------------*/
@media (min-width: 757px){
#contentOneContainer{
background-color: red;
}
}
If you adjust the screen size, at 757px I have the background color of the container switch. Basically, on my desktop, I am lining up the bottom of the image with the top of the first container. When viewed on my iphone 6s (I don't know how to make this work when viewing the fiddle on mobile) the bottom of the image and the top of the container are a hundred plus pixels apart. I hope this helps a little. Also, sorry if my code blows.
1 answers
solution1
1 2016-10-12 03:55:48
Add viewport meta tag in the head section for the media queries to work on mobile.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.