Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Sebastian Graus
Sebastian Graus
633 Points

Responsive 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
Keith Kelly
21,326 Points

This 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

missgeekbunny
missgeekbunny
37,033 Points

I was gonna ask if you did what he said.

Sebastian Graus
Sebastian Graus
633 Points

Hey, 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
missgeekbunny
37,033 Points

It should go in the head tag not the header tag. Maybe that will fix it.

Sebastian Graus
Sebastian Graus
633 Points

Yes, sorry that was what i meant. It is in the ending of the head tag.

Keith Kelly
Keith Kelly
21,326 Points

I 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
Sebastian Graus
633 Points

Thanks 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
Keith Kelly
21,326 Points

This is very weird. Have you tried being more specific by specifying the image tags as well?

#logo img {display: none; }
Sebastian Graus
Sebastian Graus
633 Points

I 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
Keith Kelly
21,326 Points

This 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
Keith Kelly
21,326 Points

Any luck Sebastian?