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

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Kristupas Repečka
Kristupas Repečka
4,684 Points
Posted by Kristupas Repečka
Kristupas Repečka
4,684 Points

Media query for mobile isn't working properly

Hi there,

i just came up with a idea to try my website on my mobile device HTC one S which has screen resolution of 540x960 and unfortunately my web site didn't behave as expected. It shows the desktop/tablet version of the page. I presumed webpage on my device will fall into 480-660px gap but instead it behaves as 660+(in both vertical and horizontal mode). As a concequence, the header looks awful aswell (small letters as it it was 1600px screen). Has anyone encountered this kind of problem and could help me sort it out?

EDIT:

@media screen and (min-width: 480px){
    body{
        background: green;
    }
}

@media screen and (min-width: 660px){
    body{
        background: navy;
    }
}

here's how it looks like on my 540x960:

http://prntscr.com/6pssto

regards, Kristupas Repecka

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Please post your media query code so we can see what went wrong.

Jovanny Elias
Jovanny Elias
16,204 Points

Hello, welcome to treehouse. I went ahead and edited the code you posted so that you can see how it should be posted the correct way. I am glad you solved the problem you were having and in the future go ahead and use one of the following ways to post your code on the forum.

How to Post Code to the Treehouse Forum

If you are using workspace a new and easy way to show us your code is called snapshot. Follow this link to see how it works.

Good luck with your learning.

2 Answers

Luke Terzich
Luke Terzich
5,193 Points
Luke Terzich
Luke Terzich
5,193 Points

Did you remember to ad your CSS viewport in your head tag?

<meta name="viewport" content="width=device-width, initial-scale=1">

Kristupas Repečka
Kristupas Repečka
4,684 Points
Kristupas Repečka
Kristupas Repečka
4,684 Points

Thanks, Luke. The problem was I tried to get ahead of myself a bit too much :) It was explained in the very next video. Got a bit confused when at the start of 8 - 1 video Nick shows the page on his mobile device looking the way as it should be.

Luke Terzich
Luke Terzich
5,193 Points
Luke Terzich
Luke Terzich
5,193 Points

Oh Good, Glad you have it sorted now pal. Just take your time and make sure it all sinks in and you will do fine. Good Luck on the rest of your course :)