CODEWITHSUNDEEP
htmlcssinternet-explorermobileresponsive-design
Dexter Reaves
Dexter Reaves

Reputation: 1

Blank space on right of ie mobile / Windows phone

I am creating this single page as a responsive design test and it looks fine in most browsers and mobile devices (that I've checked so far), except for IE / Windows Phone. I'm using IE 11's Emulation toolbar to simulate a windows phone and there is a horizontal scroll bar that scrolls to a strange blank space appearing on the right side.

I've searched the page for any excess margin or padding but can't find any. I've also tried adding 

html, body { 
  overflow-x:hidden; 
}

But that doesn't appear to work either. Which is really odd. However it DOES get rid of the space if I add

html, body { 
  overflow-y:hidden; 
}

But that also collapses the entire page along with the space. Does anyone know what is going wrong?

http://www.web-dex.com/testing/new.html

I should also add that it appears fine in Portrait view, but in landscape it has the scroll bar and blank space.

Upvotes: 0

Views: 549

Answers (2)

Chris Love
Chris Love

Reputation: 3893

first, the 'windows phone' emulation in desktop IE 11 (v1) is not an emulator for the actual windows phone browser.

vbn is right the site looks fine on Windows Phone. My guess is your development machine does not support touch and therefor has the normal 'mouse' scrollbar which is wide, not thin like the touch scrollbar.

As someone that specializes in responsive SPA applications you are better served resizing the browser down and not trying to use any of the F12 'emulation' modes for devices. None of them are very accurate. You can just about 100% see if your RWD works by resizing the browser.

You should always test on devices, I know that is not always an option for everyone. It is a must in my experience. You don't need 100s of devices. I have 5 core devices I use, iPhone, iPad, small & large Android, Windows Phone and Surface. Touch is essential BTW, browsers on these devices operate differently, like the scroll bar.

If you cant test on real devices look at something like BrowserStack. You cant get a real sense of touch response, but you can see if things layout correctly or you code has exceptions. Visit http://modern.ie for a free 3 month subscription to try it out.

Upvotes: 1

Gary Hayes
Gary Hayes

Reputation: 1788

Try wrapping your entire page in a div and centering it:

<body>
<div class="container">

your entire page

</div>
</body>

CSS:

.container {
margin-left:auto;
margin-right:auto;
left:0;
right:0;
width:95%;
}

Set width to whatever you want.

Upvotes: 0

Related Questions