I'm using bootstrap grid system,
While I'm scrolling to the right side of the window a white space appears:
I defined the body on width: 100vw;
How can I remove this space?
Even though we don't have any of your code, I can make a small guess. I had this problem before and this seemed to fix my problem. Try it out.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Related
Okay so usually I can fix this myself but I'm stuck. I have been trying and trying and I just can't get my website to stay normal when I am resizing the browser window. I added a div that holds everything inside it and named it "bodycontainer". Here's my website: http://avosinc.com/new/
Here's the style I have for it:
#bodycontainer {
margin: 0;
min-height: 300px;
padding: 0;
width: 1000px;
}
And still, it doesn't want to stay put.
Please help me out!
your using px they are not responsive just static.. try using % as that will scale down with it.
#bodycontainer {
margin: 0;
height: 100%;
padding: 0;
width: 100%;
}
If I add the following css
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
This will solve the white-space problem but it will remove the horizontal scroll-bar and it is applied 100% width whatever the size of window but my site consists of fixed width. What can I do here?
Use min-width to achieve what you are looking for.
For Instance,
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
min-width:xxpx; /* enter a pixel value more than 1px that distorts the layout on resize */
}
PS: xxpx is a representative value. Use that value that is ideal for your issue resolve.
I am working on a website for client / design studio, there was strange issue where I found that despite having body and html elements set to width 100% and when I resize browser, the scrollbar appears forcing me to scroll the right only to find there is a gap on the right side in about 150pixels. The body element container () sets itself to fixed width of 1240px when the browser is resized but still leave the gap on the right side.
Here is css code for body element.
body {
min-width: 1200px;
max-width: 100%;
left: 0px;
right: 0px;
width: auto !important;
margin: 0 auto;
padding: 0;
background: url('images/bg-repeat2.jpg') repeat;
line-height: 1;
font: 'BitstreamVeraSerifRoman', Arial, sans-serif;
}
here is the css for html element:
html {
margin: 0 auto;
padding: 0;
width: 100%;
min-width: 1200px;
left: 0px;
right: 0px;
}
I am not using "overflow-x: hidden;" property due to concerns in the need for scrolling in smaller screens and mobile devices as well. Please note that this site is desktop version.
I would appreciate if anyone in this community can assist by providing solution or fix.
Thanks.
Youre problem seems to be min-width:1200px; remove that, and it will resolve the mandatory horizontal scroll. If you want 100% width do it like this:
html, body {
width:100%;
}
I dont think you need more then that width wise, for html and body. if you do, explain why or post a pic what you need pls.
One of the sites I'm designing breaks like this, when I resize it. Why doesn't it stick to browser's edges? How can I accomplish this?
I used CSS Layout Generator to generate the layout initially. I used the liquid layout option since I wanted to make my site responsive.
Within the <body> there's a wrapper <div> which is styled like so:
min-width: 320px;
max-width: 100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
The wrapper contains all the header, middle-section and footer which inherits from the wrapper's width. They have the max-width set to 1200px and is centered.
You need to remove the User Agent styles for the left and right padding on body:
body {
padding: 0;
min-width: 320px;
max-width: 100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
See this fiddle. If you change the selector .incorrectruledisabled to .incorrectrule, you should see the results you are getting in your attached image.
You can't give something an upper limit on its width and also expect it to occupy the full width unconditionally. Please let me know if I am misunderstanding your question.
EDIT: Here is an example where the contents of the header, middle and footer are centered, using text-align, but they themselves are not.
on my website it is a div based layout when the window is reszied everything is pushed together. Such as images overlap or are moved below each other and divs also overlap each other.
How can I get it to scroll when the content of the div is greater than the window size, similar to facebook if you resize the window it prevents anything overlappting and just makes the user scroll?
body
{
background-color: #B0B0B0;
color: #ffffff;
margin-top: 0px;
margin: 0px;
}
#header
{
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
}
#content
{
width: 80%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding: 30px;
}
<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>
The html is like that but obviously with more content
Hope I haven't made this too confusing, thanks.
Just add overflow:auto; to your div.
You can also use the following if you only want x or y scrolling
overflow-x:auto;
or
overflow-y:auto;
use the overflow:scroll; to enable scrolling in the DIVs
You must add white-space:nowrap; to your body tag.
I believe you may want overflow: auto;
Here's a comparison between auto and scroll.
add the style
overflow: scroll;
to #content
This answer is pretty late, however I stumbled across this question, as I was having issues on one of my pages, where I have this Page with 30 odd inputs of various types, that are split between two tables. I was unable to scroll to see about 10 or so inputs at the bottom of the page, and could not even scroll left to right when adjusting the browsers width.
What solved my issue was:
html, body {
overflow: visible;
}
This activated my X and Y scroll bar.
I had an issue with my footer not adjusting when scrolling, it instead would just stay fixed where it was situated before scrolling. this was due to my master CSS having the footer's position set as absolute. Simple fix, just creating a new style element in the page and added
footer {
position: fixed;
min-width: 100%;
}
I hope this helps anyone looking for a solution.
As stated by user3726345 , the best option to use is the
html,body {
overflow: visible;
}
using
overflow: auto;
dosnt give the best output. then you can further adjust your footer codes to your taste.