Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Sebastian Graus
633 PointsResponsive design not working for iphone
Hey there,
I've got this weird problem that I don't understand. I'm building a site and am on my way getting it responsive. It work's when I scale the browser window in my mac down 320px in width with the Resize Window extension for Google Chrome. However, when I visit the site trough my actual iphone they look nothing the same.
For example, see this css:
/* Small ----------- */
@media screen and (max-width : 480px) {
#logo {
display:none;
}
}
The logo disappears when I resize my browser window on the mac computer, but in the iphone browser (tried safari and chrome) it's still there.
So, what to do? You can find my page at http://marielaveau.se/wordpress/
4 Answers
Keith Kelly
21,326 PointsThis might be due to the fact that the iPhone tries to scale the entire website and essentially ignores the media query. You will need to add the following line of code to your head tag in html.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is a link to the Treehouse lesson for more of an explanation:
http://teamtreehouse.com/library/websites/build-a-responsive-website/adaptive-design/viewports
Keith Kelly
21,326 PointsI kind of jumped the gun on the initial answer without checking the base code. Now that I see it I think it could be a small syntax error with the media query line. From what I can see on the max-width 480px query you have a space between the max-width and the colon. (i.e "max-width : 480px" instead of "max-width: 480px")
I think this is causing the browser on the phone to ignore the query.
Let me know if that helps.
Sebastian Graus
633 PointsThanks Keith, sadly that's not it! Tried to change it and flushed out the cache and so on in my iphone and still doesn't work.. Hm, very weird.
Keith Kelly
21,326 PointsThis is very weird. Have you tried being more specific by specifying the image tags as well?
#logo img {display: none; }
Sebastian Graus
633 PointsI tried it and it doesn't work. But now I noticed that it's partially working. In the media query for iphone I've set the widths to 100% and that is working for all my content. The header div however is still fixed to the left and all the content in the header that I've set to display:none is still showing upp. This is all the css for my header:
/* Small ----------- */
@media screen and (max-width: 480px) {
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { width:100%; margin: 0 auto; }
#header { width: 100%; height: 25%; position: static; padding-top: 0%; background-color: #f7d846; float: left; display: block; max-width: 500px; }
#headercontent { float: left; }
#contentwrapper { width: 100%; float: left; margin: 0 auto; padding: 0%; position: static; margin-top: 25%; }
.baren, .restaurangen, .boka_bord, .lfc, .littlequarter, .xxx { width: 100%; margin: auto; float: none; text-align: center; margin-top: 4%; margin-bottom: 7%; }
.nav { margin-left: 5%; }
.nav.js { display:none; }
.nav ul { margin: 5% 0; width: 100%; }
.nav ul li a { -webkit-user-select: none; font-size: 0.750em; display: block; }
.nav ul li { float: left; margin: 5% 0; }
#logo img { display:none; }
#headerinfo { display: none; }
hr { display: none; }
.page-item-20, .page-item-18 { display: none; }
}
The weird thing is that it's working when I resize it in my browser in the mac, shouldn't the iphone act exactly the same?
Keith Kelly
21,326 PointsThis is really strange. I did notice that you first media query @media screen and (max-width : 1060px) does not have a closing bracket.
I am wondering if the desktop browsers are automatically closing the query when it reads the next one and the iphone is not.
Other than that, I am pretty stumped right now.
Keith Kelly
21,326 PointsAny luck Sebastian?
missgeekbunny
37,033 Pointsmissgeekbunny
37,033 PointsI was gonna ask if you did what he said.
Sebastian Graus
633 PointsSebastian Graus
633 PointsHey, thank's for the answer but I've already put
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">in the last line of my header tag, in my header.php. So that's not it!
missgeekbunny
37,033 Pointsmissgeekbunny
37,033 PointsIt should go in the head tag not the header tag. Maybe that will fix it.
Sebastian Graus
633 PointsSebastian Graus
633 PointsYes, sorry that was what i meant. It is in the ending of the head tag.