Width problem

[Historical Forums User]

There is some issue with CSS of the site. There is some free space on both sides of the actual content, its intended but on mobile devices (iphone, ipad etc) the free space of the left side of the page gets chopped off but right one stays. How can i fix this??

Here is how it looks on PC: http://i.imgur.com/p6lk3.png

and this is how it looks on mobile: http://i.imgur.com/NsW5g.png

Any help will be highly appreciated.

[Senff]

This stuff often happens when some elements take up the full width of the page (because they have no width assigned), while others are assigned a specific width. The use of “min-width” for blocks can also cause issues.

Kinda hard to see without an actual live example.

[Historical Forums User]

In my case, only body tag has no width assigned. All others have it and there is no min-width either.

Here is link to the site: http://www.maximum-tech.net
See if you can tell what can solve the issue.

[Senff]

In the sidebar, there are some elements that are wider than the actual sidebar allows (162px).

The login form is placed in a table that has a width of 269px, and the Facebook iFrame (under “Connect”) has a width of 450 pixels. Although not visible directly, this makes your whole wrapper wider than the designated 1200 pixels — it’s actually some 1500 pixels or so.

That’s how iPad sees it. It zooms out based on the elements that are actually there, whether they’re visible or not.

I’m not sure if you really have to reduce the widths of those elements or if a simple overflow:hidden; on the wrapper or the sidebar is enough, so give it a try.

[Historical Forums User]

@Senff
Can you please tell me how can i decrease the width of the table which has login form? I looked for it everywhere but can find anyway to fix it.

Chrome shows it fine but IE and all mobile devices dont show it right.

[Paulie_D]

It’s in the HTML…the table has a width set of 269px in the inline css.

Now how that HTNL is generated is another matter.

[Author]

Posts