Here's the look:
[ ]
I did the page in ReactJS, but I've made a copy of the page here .
To better show the white space, here's the screenshot:
several interesting observations:
screen.width
= 375 $('html').width()
= 375, also $('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e).width())})
would give me no output Any idea on: 1) why the white space appeared? 2) how could I solve the issue?
PS: just in case if you missed the part I put link to CodePen, Here it is again .
Update 2: I have this input box which I'm placing outside the page:
<input type="file" class="attache-upload-button" data-reactid=".0.0.1.3.1.1.0.0.1">
Corresponding style:
.review-add-form form .uploader .attache-upload-area .attache-upload-button {
position: fixed;
top: -1000px;
}
I inspected the DOM with chrome inspector, and i saw that the <svg class="bar">
is exceeding in width. I tried to set a overflow: hidden
to the containing element, .progress-bar-circle
and the whitespace disappeared
Add this to the css.
html,body {
height: 100%;
width: 100%;
margin:0;
padding:0;
overflow-x:hidden;
}
Faced this issue multiple times and in my case its generally a div or an element that is crossing the width of the screen thus stretching out, maybe try and analyze with chrome dev tools and inspect the layout, try and get rid of few divs and see if it changes anything, or maybe reduce the width of absolutely sized elements,etc.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.