Centering desktop version of site on IOS and Android mobile devices

I have been knocking my head against a wall for a couple of days now trying to figure out why the desktop version of this site is not centered on mobile devices. Initially, I thought it might be due to the footer extending outside of the main wrapper which is 1000px in width. However, when that was fixed the desktop version of the site still wouldn’t center on mobile screens. Anyone know what might be causing this besides for what I just mentioned? You can get to the desktop version of the site on mobile devices by heading to the very bottom of the home page and clicking on “full site”. I know the HTML, CSS, and page optimization is less than ideal but let’s stay on topic since I inherited this and had no part in the initial creation.

Using opera mobile emulator in combination with progressively hiding children of #page I’ve narrowed down the culprit to #header-group-inner. When that div is hidden the page properly centers on the opera mobile emulator. Now to figure out exactly what in that div is causing the issue and how to rectify it.

Hi,

I think its the #menu-bar element that’s causing the problem because it is a 1000px wide but sits inside a container that is only 820px wide (#menu_bar-wrapper).

Try this:


#menu_bar{width:auto}

You could just add overflow hidden to the header but you may want visible overflow at some time so is not always the best choice.


#header-group .inner {overflow:hidden}

Yep, it was that and one other div that required an auto width instead of fixed width.