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
