navigation line wrapping on tablet

i am in the throes of my first 'responsive' site build and am spending a lot of time testing the site appearance with different devices as I can't seem to get consistency compared to my desktop.

for example, where the viewing window is above 768 px, my layout is 2 columns, 700px wide overall

I have a simple navigation set up, and it looks fine.

below 768px, the layout switches to a single column, and as the width of the viewing window reduces in size, the navigation begins to line wrap, so i need to do some work here.

on my tablet in portrait mode, which has a resolution of 800px. the page layout is as expected, but the navigation line wrapping has already started.


i should get no line wrapping where the viewing window is above 768px

rhubarb.forthwebsolutions.com usename & pwd = 'webassist'

reduce the menu UL margin, the margin for the a tags in the menu, and the margin for the entire page, these margins are adding to the needed width of the menu.

Thanks Jason.

I checked the margins for all of the elements you listed, but they appear to be set to 0 already.

Is it the padding I need to change ?

Can you explain why the menu is wrapping on the tablet at the same width please ?

Thanks

yes, try editing the padding.

  Can you explain why the menu is wrapping on the tablet at the same width please ?  

I don't have a tablet to test with, so i cant comment, one thing i do know is that different tablets have different widths to the view port.

Ok, I will try the padding. - Thanks for the advice

My tablet has a resolution of 800px portrait, and 1280px landscape, and shows the same menu anomaly in both orientations.?

Same issue on my wifes ipad

screen resolution is not the same as the view port size.

one issue i see in your media css, is that you have a section to define some elements for certain screen sizes on top, then there are other section to define other elements for those sizes bellow.

the media queries need to go top to bottom, from biggest to smallest.

the media queries for the bigger screen sizes after the 360 media query will be ignored.

The css file you pointed out had a lot of commented areas, so I have deleted them and updated the file.

The sizes should go from top to bottom as you said.

I take your point about resolution and viewport, which is one reason i added the js grid overlay to the home page.

The thing is, when the viewport is 768 wide or less, the floating toolbar moves from the side of the screen to the top.
There is no point before this that the navigation starts to wrap

as you can see from the screenshot, the navigation is wrapping on the tablet whilst the viewport is > 768, with the toolbar still parked on the right hand side

this really is not my area of expertise, so i really cant give much more advice.

thanks for all your help Jason, I have reduced the padding by 10% on some of the navigation elements and it now fits on my tablet.
ok on ipad in landscape mode but not portrait
haven't resolved the issue, but it is an improvement

need to test on a kindle next !

(hope there's an easier way !)