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 CSS Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

Posted by asliari
asliari
4,178 Points

My Breakpoints work, but not exactly on the same width that i set.

Hello, I tried media queries first with a very simple code. Worked perfectly.

Then I implemented it to a page that i created (Which is not a complex page). But breakpoint is working after 511px, instead of 769px. I used this following statement,

.title-mobile {display: none;} @media (min-width: 769px) { .title-mobile {display: block;font-size: 15px;} }

I want to not display "title-mobile" on mobile devices, It should only can seen on devices wider than 769px. I am trying to find why do i see this DÄ°V after 511px..

And I set the min width to different sizes. But I could not find any resemblence of this 2 different results.

@media (min-width: 900px) - Breakpoint 600px @media (min-width: 769px) - Breakpoint 511px;

Is there any property in CSS might have an effect on media queries? Or should i use min & max together?

3 Answers

asliari
asliari
4,178 Points

I solved the problem! My browser zoom was %50, I have found some people like me asked the same question online, off course we blame the code first :) I will consider the browser settings next time.

Cristian La Spina
Cristian La Spina
11,829 Points
Cristian La Spina
Cristian La Spina
11,829 Points

I'm not sure, but maybe you should add the box-sizing property. Try to add this in your CSS, before media queries.

body {
  box-sizing: border-box;
}
asliari
asliari
4,178 Points
asliari
asliari
4,178 Points

Thank you Cristian, I alreay have box-sizing property :/

Cristian La Spina
Cristian La Spina
11,829 Points
Cristian La Spina
Cristian La Spina
11,829 Points

Can you post your HTML and CSS? You can also use http://codepen.io and share the link.