media query problems

I’m playing with my first responsive layout, after reading the Ethan Marcotte book, and I’m struggling with the behaviour of my media query, which I hope someone can help me with, as I ‘ve been staring at it for too long and it is doing my head in.
My page has a 2 column layout, set by default at 70% page width, but (should) be only 700px wide above 768px viewing window.

What happens is that the page width resizes to 70% at about 854 pixels (not 768px), and I can’t work out why it is doing this.

rhubarb.forthwebsolutions.com

(username and password: webassist)

For the purposes of the test, I have removed everything from the media query css except the transition below 768px, (no mobile resolutions here yet).

Hoping one of you CSS gurus out there can tell me what I’m missing/doing wrong.

Thanks

Hi Craig,

Unless I'm missing something, your page seems to be breaking down around the 768px marker. I measured the breakpoint using the Chrome MeasureIt extension and it doesn't appear to be triggering the next media query at 854px. Its triggered at a lower px dimension. I also checked out your page on my tablet and smartphone and all seems to look as expected.

But then again, I could be completely misunderstanding your problem.

Mike

Hi Mikey, and thanks for coming back to me so quickly.


There is a js column overlay on the page, (top right to activate).

If I open the page in chrome and press f12, to debug, I hover over the body tag and it shows me the values I posted earlier.

Maybe I'm being thick here and not reading it right, (quite likely), but I can't get my head around it

If I take a screendump of the browser window and paste it into photoshop, the image width (if you add the scrollbar) is about what you expect.

Attached is a copy of the screendump, with the page width and css highlighted.

- btw glad it looks ok on a tablet.

Hey Craig,

Here's a screengrab from my end. Referencing the body tag in the upper left corner, its showing the break point accurately. I closed the window just to the point where you're second media query kicks in (768px) and this is the result I got. I'm using Chrome on a Mac.

I'm hesitant to use fixed width grid overlays for responsive designs since the layout is always changing based on window size. But that's just me. I definitely use a grid when designing Photoshop comps though.

I'm assuming the book you're referring to is Responsive Web Design (yellow cover) published by A Book Apart. Great read. All of the ones they publish are invaluable.

Hi Mikey.

Unfortunately the image you uploaded is really small so I can't read it.

In answer to your question, yes, it is the yellow book by Ethan

Something is definitely amiss though.

What I find is at the point where the media query kicks in, the width (and navigation bar) expands a bit on my screen.

where I am running at a fixed width of 700px above 768 resolution, at the point where the viewport changes, the page width on my browser increases to about 784px, (which is 90% of the window).

If the window was truly 768px, then 90% is just under 700px, and the scaling would be virtually seamless, do you see what I mean ?

The only way I can get it to behave om my browser is set the page width to 82%.

As an aside, navigation -
if i look at the page on my tablet in I get the 2 column layout, as expected, (1080 (landscape) or 800 px (portrait) resolution) but the navigation has started to wrap, in either mode

on my desktop, in chrome, the navigation doesn't wrap until I get a lot narrower, and after display is single column.

if i can get some consistency, it would help me a bit, but I'm a bit in the dark at the moment.

-on the plus side, I have learned how to do a screen dump from my tablet !

I think I may need to start again with a blank canvas and find out at what point it starts playing up

Hi Craig,

Sorry, I'm not being of much help. And I can't seem to upload a screengrab that meets the max file size requirements that the forum imposes. Try as I might, it gets automatically shrunk down. Basically, what I was trying to show you was that at the breakpoint, the body tag was referencing 768px. All seems to be spot on on my end.

I'm definitely not seeing an expansion in page width or nav bar width. All appears to remain at 700px wide when viewed as a 2-column and 1-column layout. I checked out your page in Chrome on both Mac and PC and got the same results. Even IE 9 and 10 are rendering properly.

I do see the nav starting to stack on a tablet in portrait mode. Sorry, I missed that yesterday. Should be an easy fix - just write a selector inside your tablet media query and adjust the margin or padding on your list items. On my iPad I'm seeing a 2-column layout in landscape mode (1024px) and a 1-column layout in portrait mode (768px).

Just curious; have you considered adding anything like respond.js to tackle the media query issue in IE 7 and 8 since they don't support them? Just in case someone happens to be using that browser and resized their window.

I may be completely off, but I'm wondering if you're experiencing some funkiness because of the way your media queries are written. You're referencing 768px in both min and max:

@media screen and (min-width: 768px) {
selector:{};
...
}

@media screen and (max-width: 768px) {
selector:{};
...
}

=> Have you tried anything along the line of the following:

/* --------------------------------------------------------------
Desktop Layout: 769px and up
---------------------------------------------------------------*/

@media only screen and (min-width: 769px) {
selector:{};
...
}

/* --------------------------------------------------------------
Tablet Layout: 481px to 768px
---------------------------------------------------------------*/

@media only screen and (min-width: 481px) {
selector:{};
...
}

Best of luck with everything.

Mike

Thanks again for your feedback Mikey

At least with php, when it works, it works !

I tried your suggestion with the min-width, but no joy.

Just for fun, I created a new empty page, reset the styles, and added media queries to the css.

The page simply changes background colour and width when the 'threshold' is reached.

Looks like it happens when body width is 854 pixels again

mediaquery.php

I must be missing something fundamental, time for a glass of something.

No worries. Wish we could get this resolved for you. Here's a screengrab of the breakpoint on my end. This is where the color shift happens for me. Unless I'm using web inspector completely wrong, the Body width is showing 768px when it reaches the threshold.

Oh, I've hit the bottle many times over things like this.

Mike

Thanks again for taking the time to look.

Here is my screenshot

I am pretty sure the resizing is occuring a the right point, but just don't understand why my body tag is showing the width it does.

Dare say when I do work it out, it will be obvious !

just to close off this thread, as i am about to start another in a similar vein, I reset all of my media query css and started again.

so far, it is behaving, at least insofar as the body tag is showing the correct width at the breakpoints.

Thanks for the help.