Fine tuning a layout

[Steve Kucera]

Hello,

Spent the past few hours trying to get a mobile version template laid out for a client site. Sadly I did not do the original layout as I'm taking over someone else's work.

http://simplemobile.co/validate.html

Trying to make this a 100% width layout. The click for menu button at the top should float all the way right, and the green bar at the bottom should span the entire screen but neither do that. Something about the layout is prevent my 100% wide elements from spreading all the way.

I put a 1px red border around the body tag for debugging and as you can see, even it isn't spreading the entire width of the viewport.

There is some code bloat since I'm trying to create the mobile site just by changing the style sheet. There are elements from the desktop version that I'm hiding for the mobile version.

The style sheet in use is called mobile.css

Any help is appreciated.

Thanks

[thulsa_doom]

My personal preference is to go ahead and style everything to a specific size (my personal site uses a maximum element width of 520px IIRC) and then use the viewport meta tag to ask the device's browser to use a similar value. In my case I wanted a sliver of whitespace around my 520px material, so I used

Code: Select all

<meta name="viewport" content="width=530, target-densitydpi=device-dpi, initial-scale=1" />

Since I'm telling the browser to act like its screen is 530 pixels wide and am providing 520 pixels-width of content, there ends up being a 5 "pixel" gutter to the left and right. This appears to work well on iProducts, Androids, and Winphones, and is safely ignored by every out-of-the-box desktop browser that I've come across.

Of course, my layout doesn't try to take up all the horizontal space on a full-sized screen, so it lent itself more readily to mobile conversion.

[Steve Kucera]

Well I just had to do an old fashioned code chop to whittle it down to the offending div. It was the padding in one of the divs that was throwing things off.

Thanks for the tip. I'll look into that as well.