close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

navigation line wrapping on tablet

Thread began 4/03/2013 7:01 am by CraigR | Last modified 4/03/2013 3:21 pm by CraigR | 660 views | 8 replies |

CraigRBeta Tester

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'

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

CraigRBeta Tester

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

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

CraigRBeta Tester

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

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

CraigRBeta Tester

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

Sign in to reply to this post

Jason ByrnesWebAssist

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

Sign in to reply to this post

CraigRBeta Tester

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 !)

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...