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

Posted by Viktor Yakov
.a{fill-rule:evenodd;}techdegree seal-36
Viktor Yakov
Front End Web Development Techdegree Graduate 15,770 Points

Media queries problem

Hello, I'am working on "Online Registration Form", which is part from "Techdegree" program. The design is ready with html and css. Everything is working perfectly fine.The project is designed with "mobile-first" approach. The problem is that, when I'am trying to setup the breatk point with "@media (min-width: 760px)", it doesn't apply the break point, when i resize the browser to 840px or more the statements in "@media (min-width: 760px)" are starting to get applied which is strange and it happens for first time.Any suggestions how it can be fixed. Thanks! Viktor.

Ajay Prasannan
Ajay Prasannan
16,124 Points
Ajay Prasannan
Ajay Prasannan
16,124 Points

Hi Viktor,

Can you share a link or the code with us?

Thanks,

Ajay

4 Answers

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Hi Viktor,

I suggest you to write

@media screen and (min-width: 760px){
...
}

Also add viewport meta tag to html:

<meta name="viewport" content="width=device-width">
Viktor Yakov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Viktor Yakov
Front End Web Development Techdegree Graduate 15,770 Points
Viktor Yakov
.a{fill-rule:evenodd;}techdegree seal-36
Viktor Yakov
Front End Web Development Techdegree Graduate 15,770 Points

Ajay Prasannan there is the codehttp://codepen.io/anon/pen/LGJgbB.

Sergey Podgornyy I will try the first wtih screen. I'already wrote the same meta meta.Thanks folks for fast response ! Viktor.

Viktor Yakov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Viktor Yakov
Front End Web Development Techdegree Graduate 15,770 Points
Viktor Yakov
.a{fill-rule:evenodd;}techdegree seal-36
Viktor Yakov
Front End Web Development Techdegree Graduate 15,770 Points

Unfortunately doesn't working.

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Your code works fine on my local machine. Codepen use own frames, that's why it corresponds to the frame width, not browser width.

Viktor Yakov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Viktor Yakov
Front End Web Development Techdegree Graduate 15,770 Points
Viktor Yakov
.a{fill-rule:evenodd;}techdegree seal-36
Viktor Yakov
Front End Web Development Techdegree Graduate 15,770 Points

But I can't understand where the problem is, because I used media queries before and didn't have this problem. It somehow the browser doesn't want to read my media queries at 760px it starts from 840. I've tried to change the min-width to higher or even lower value, but somehow it's adding, it's own value usually higher then mine. The interesting thing is, that it's only happening on this project. The media queries are working fine on everything else, just this project is exception very odd and frustrating. Thanks Sergey for the help! I'll try to find solution. Viktor.