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!
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.
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?
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.
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?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.