CSS CSS Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

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

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

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;

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

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.