Member Avatar for mgn2683

I am having an issue with the spacing of my navigation. It renders fine for all standard browsers, but on tablet and mobile devices it pushes the 'Contact Us' under the other items. I've reduced the padding, but it still hasn't resolved the issue. It can be seen at http://psychhealth.net

Thanks!

  • 2 Contributors
  • 4 Replies
  • 181 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by mgn2683

Dani AI

Generated

Quick, practical checklist based on what reported and suggested. The usual causes for a single nav item dropping to a second line on phones are: missing mobile viewport (so the page is scaled), mobile browsers “boosting” small text, or the nav allowing wrapping. The fixes below preserve the intended 12px size and keep items on one row without repeating the font/media changes already tried.

Add a viewport meta in the document head:

<meta name="viewport" content="width=device-width, initial-scale=1">

Prevent mobile browsers from auto‑resizing fonts:

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

Force the nav to stay on one line (and allow safe horizontal scrolling if the screen is too narrow):

nav ul {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
nav li {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  box-sizing: border-box;
}

Quick debugging techniques: enable a visible outline/background on each li to see actual widths; inspect the computed font-size in a mobile emulator or using remote devtools (Safari Web Inspector / Chrome device emulation); look for any media queries that change body or nav font-size at small widths. If the nav still doesn’t fit, either reduce per-item padding or use a responsive pattern (horizontal scroll, condensed labels, or a collapsed menu). Note: disabling text-size-adjust can impact accessibility—use it only after confirming the viewport meta is present and the layout behaves across devices.

Recommended Answers

All 4 Replies

Member Avatar for lps

Basically this type of problem is related to the font family you are using. As for your information, not every font family is available to mobile devices. When the font family is not available, it will use its own font and thus, causing the problem.
Try using a different font which support mobile devices.

Member Avatar for mgn2683

I've updated the font family to a standard family. However, I am still having the issue where it will run over to a second line, and doesn't seem to follow the defined css on mobile devices. Any thoughts on how to correct this?

Member Avatar for lps

Please do add in your media queries such as media="all" when you link your CSS:

<link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css" media="all">

This is because the default media is screen where it shall available to computer screen only.

Member Avatar for mgn2683

I added the

media="all"

to each page in the CSS link, but am still having issues with the spacing. I also noticed the overall main body font is also much bigger than the 12px that I defined. I thank you for all your input so far...any ideas as to what is causing these formatting issues?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.