Page Width Peculiarities on Mobile Devices (Mobile Variant or not!)

Hi!

I wonder if anyone can shed some light on a few issues I'm having with page widths?

Ok, so I get that a page has a width, but some screens may be wider than my page. I like webpages that stretch an image or a bar of colour right across the page so there's no white margins on either side.

I do this on my website (www.biready.com.au)

However, I find that when viewed on a tablet or mobile phone, the browser there allows sideways scrolling to see the end of said colour bars. It appears the mobile variant totally disregards the page width and permits me to scroll into white space.

See the attached images to see what I mean. The iPad screenshot is using the same variant as my desktop browser which also has this problem.

How can I eliminate this problem?! How can I get my pages to not scroll beyond their page widths?


Attachment 102214 Attachment 102215

Looking at your mobile site via firebug it would appear that you haven't reduced you headers as inspecting the element gives:

Quote:

---

<span class="xr_ar xr_t110" style="left: -824px; top: 0px; width: 2528px; height: 116px; backgr….000,0,0); transform: matrix(1.000,-0.000,0.000,-1.000,0,0);">

---

2528 pixel width is a tad to wide for a mobile ;) You need to reduce these in your mobile variant.

New to this bit myself of course but I think it's worth a look at.

Hello Ian, I'm here to seek assistance on how can I create the expanding social medial icons shown on the left side of your page (www.biready.com.au) Thx.

Sam - http://www.sharethis.com/#sthash.1G8bKRf8.dpbs

Quote:

---

Originally Posted by gwpriester

Sam - http://www.sharethis.com/#sthash.1G8bKRf8.dpbs

---

Thanks Gary - been looking for something like this - much easier than the individual Xara widgets....