Why do I need to set my @media breakpoint to greater size?

[webbmalin]

Hello, I customize WordPress themes from scratch.

Trying to keep up with the technique and have made a few webites responsive. Now I really need your help, cause I’m stuck on this one.

Let’s say I use this:
@media all and (max-width: 768px)

And I do my css changes, NOTHING happens until the screen size is 600px. Why not at 768px?

In order to make anything happen at a 768px screen size, I need to set the breakpoint to around 830px.

So I can make it work by doing so, but I have no idea why. Nobody else seems to have this problem, I’ve googled it quite a bit.

It’s the same with every width I chose, not just 768. And I had the same problem with all the websites I have made responsive.

Does anyone know what I’m doing wrong?

The one I’m working on now is local, but I’ve made this one too: http://biofood.se/
(never mind the “carousels” on front page, they’re not pretty on some of the screen sizes but you’ll might see what I mean with the breakpoints).

Thank you so much!
/Malin

[Paulie_D]

Looks fine to me…you don’t have the browser zoomed do you?

[webbmalin]

No it’s not zoomed. And no missed closing remarks… (I haven’t even done anything for the 600 media query yet).

I check both with firefox developer tool and at sites such as http://responsivetest.net/

How do you check yours?

Yes, I code completely from scratch… well, I also reuse my old stuff too and change them… That’s what I like to do, at least before people wanted responsive, hehehe…

[webbmalin]

As I mentioned before, I always have this problem… maybe I’m doing something else wrongly…

Using this, I do want people to be able to zoom if they like.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

I’m not doing anything with body for the media querys, only the div’s…

[webbmalin]

hmmm!
ok, I think you’re right about something being weird with my browser.
Looks ok when I just push the browser window smaller to 768px… but when I use web developer tool to view it looks weird even though it’s set to the right pixels….

But still weird that it also looks bad at testing sajts…

[webbmalin]

Yes I know you meant my browser view zoomed in. And I know how to reset it.

I mean every site I work on.

I will try on different computers (i only have one computer, and work locally on it, so I usually test on other computers after I’m done coding).

Seems to work by only resizing window, but I thought that was exactly what the web developer tool did.

Thanks!

[Author]

Posts