Scroll bars never appear when re-sizing web page - html

so I made a website but for some reason no matter what I do, I cannot get any scrollbars to appear when the page is too small. I've been looking for quite some time but can't find a solution. I've tried many things but can't figure it out for the life of me. I suspect it has something to do with overflow but even adjusting that doesn't seem to work. If anybody could help me diagnose this, I'd really appreciate it. I'll go ahead and link the relevant codes below. I know it's probably a simple problem, but I'm about to rip my hair out trying to figure it out. Thank you for any help, I really appreciate it.
Main index page: http://pastebin.com/TkdzdKbG
CSS Style: http://pastebin.com/tMKQtC6v

Apply this CSS
.ibg-bg {
height: 100% !important;
position: absolute;
}
Remove position
.bg {
height: 100%;
/*position: absolute;*/
width: 100%;
z-index: 0;
}

I'm not sure if it's the solution you're looking for but in your "container" div, there's an inline style "overflow:hidden", if you remove that, you can get scrollbars whenever the page is too small.
http://prntscr.com/8pcd0f

I think this is because of overflow property. Try this on your stylesheet,
.container .bg {
overflow:scroll !important;
}

Most of your contents are under div.bg > div.display but the height of the parent node-div.bg- is 100% and its overflow value is set hidden by one of the scripts. (query.interactive_bg.js, I guess)
You can set the height of div.display to 100% and its overflow-y value to scroll to scroll the contents or if you want a horizontal scroll bar as well, change overflow-y to overflow.
Add these line to your style.css file, line 172:
.display{
position: relative;
height: 100%; /* Added */
overflow-y: scroll; /* Added */
}

Related

blank space on right side of website, culprit is not visible

My website has blank space to the right of it almost as if a margin was added to the site. The site content stretches 100% across the site and looks good, but if you scroll to the right you will see the space whether you are on a desktop or mobile.
This is such an age old question which I have also encountered in the past, but in this specific scenario, I can not seem to figure out what is causing the extra space and or why it behaves the way it does.
Thanks for any suggestions!
This block of code is causing the issue:
.hentry:after {
background: rgba(0,0,0,0);
display: block;
position: relative;
left: -5.1%;
width: 110.2%;
height: 1px;
}
Set the width to 100% or less. Good luck!
Just simple add this in css file.
body { overflow-x: hidden; }

Can't get overflow-y: scroll to work

I'm trying to create a vertical timeline but I can't seem to get the overflow-y: scroll to work. Here is a link to the website:
http://fosterinnovationculture.com/infographic/index.html
The parent div has an overflow: hidden but the child div has overflow-y. It works properly if I remove the parent div but I need it inside of the div so that list.js plugin works properly.
I see your code have
html, body {
overflow: hidden;
}
// it mean only full screen and all overflow is hidden.
So in .scroll you need set max-height. I suggest a solution
.scroll {
max-height: 90vh;
}
You fixed the height of body to 100vh and set it's overflow property's value to hidden;
So not matter whatever the height of body's child is, it will not scroll;
If you change body's overflow property to auto, scroll will work;
At the same time you may change the position of top_nav to fixed, in order to keep the search bar at the top all time time.
It seems like you are repeating the same question. Here is you asking about the same problem (though I will admit the question is different because it has changed). Here is my answer to that question.
Before giving an answer, I will say that the most important thing I tell myself when coding CSS is: if I start having to hack then I am making it too complicated.
With that said, start by removing every instance of overflow: hidden; in your code.
Then get this in there:
.top-nav {
height: 70px; /* you already specify this on your site */
}
.scroll {
position: absolute;
top: 70px;
bottom: 0px;
left: 0px;
right: 0px;
overflow-y: scroll;
}
In cases like this, you should try to realize that your question regards a design that is common and someone else must have asked your question before. If you cannot find an answer to such a question, it may be good to rethink your search keywords.
Here is a Stack Overflow question that answers your underlying "how-to" design question.

Pure css way to prevent scrollbar pushing content to the left?

Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css?
I mean no hacks or anything.
I tried two javascript solutions:
1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.
2) Calculate the offsetWidth and apply it on the wrapper div on every resize.
What didnt work:
1) Position absolute.
2) Floating everything to the left was a bad idea.
3) Leaving the scrollbar visible (Looks bad).
4) Overflow-y hidden makes things user unfriendly.
There are a lot of ways to go around this issue though normally you won't mind a little push to the left:
Give overflow-y: scroll to body and make sure always there is a scrollbar.
Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:
a. Giving width: 100vw to body element, or
b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.
There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.
Just give your body a width of 100vw like this:
body{
width: 100vw;
}
Even though all the answers above are correct, I stumbled upon this issue and I had to come up with another solution.
Since my content width takes up the whole page and it has some properties to justify in the center, it was being pushed to the left and these options didn't prevent it from happening.
What fixed the problem for me was to add a padding of the size of the scroll when the scroll is added on hover.
I tested on Chrome and Edge. It's not a perfect fix but it is enough for what I need right now.
.scrollable {
width: 100%;
height: 91vh;
overflow: hidden;
padding: 0px !important;
}
.scrollable:hover {
width: 100%;
height: 91vh;
overflow-y: auto;
padding-left: 16.8px !important;
}
Unfortunately there is no other way to prevent your problem.
Just use
body {
overflow:hidden;
}
As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.
I hope that helps.
To disable the horizontal scrollbar, you can use overflow-x, so it won't affect your vertical scroll:
body {
overflow-x: hidden;
}
Just set overflow-x to hidden on the element that has the scrollbar (usually this would be the body or the immediate children of it).
I had the same problem on my nextjs app which already had overflow-x set to hidden on the body. The below solution worked for me
#__next{
overflow-x: hidden;
}

CSS full width horizontal scroll

I have just completed the following website but when I load it I seem to have an excess scroll.
Could you please give me feedback as to why and how could I resolve this issue.
I can post the code here but most people from the previous questions I have had over the last couple of days like a working example
So, the NAV element in the footer had a negative right margin, which caused a horizontal overflow, which in turn caused the scroll-bar to appear. I guess, your intention was to move the nav-items further to the right.
To get rid of the scroll-bar, just remove the negative margin, and instead set the width of the NAV to the appropriate value.
Try to add following line to your wrapper
overflow-x: hidden;
Try adding this css property to your <div id="wrapper"> element:
overflow-x: hidden;
Check this link for the official documentation of the overflow-x property.
Your css should look something like this:
#wrapper {
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
overflow-x: hidden;
}
I've tried it in Safari(version 5.1.7), Firefox(11.x) and Google Chrome(19.x) on a Mac Os and it works like a charm.
Hope it helps!

Text overextending past footer DIV tag

I've been having problems with my DIV layers - the text goes beyond the DIV footer image, but it's not entirely the DIV background's fault 'cause it DOES repeat... Up to a certain extent. :( I can't seem to figure out how to force the text to stop overextending past the footer DIV tag WHILE keeping the DIV background going.
My "container" element houses the images and the other two elements. The "main" element is where the text goes, and the "footer" element is the image that comes after the end of the text.
In this image here, the text goes over the footer image - green arrow is to show where the footer image starts, red arrow is to show where I'd like the text to stop. The background image in the container works for awhile but then stops, so I suppose it doesn't expand correctly...??
I tried to play around with the code to try and fix it - from trying to add padding-top/bottom, to adding the repeating background stretch in the body part, to playing around with the position properties, to trying out the sticky footer (except my layout is only one column... the navigation is part of the layout in the CSS), I just can't seem to get it right.
This is as best as I can get it. :( Do you guys have any helpful solutions and/or tips?? Thanks so much!
Link: http://bubble-wrapped.net
#container {
position: absolute;
width:1057px;
height: 100%;
background-image:url(layout/bw-div.png);
background-repeat: repeat-y;
border:0px;
text-align:left;
padding-bottom:50px;
}
#main {
position: absolute;
top: 256px;
left: 126px;
width: 830px;
margin: auto;
}
#footer {
height: 358px;
width: 1057px;
bottom: 0;
position: static;
background: url(layout/bw-footer.png) no-repeat;
}
It looks like you've set the footer to a set height, which is why the text is overflowing.
If you're find with cut-off text, try adding a CSS property to the footer: overflow:hidden or overflow:scroll.
If you don't want overflow, then try removing the height property from the footer or setting it to height:auto or something similar.
Has to do with position: tag & height: tag
I suspect it has to do with the element within the container and not just the container.
It would help if you would post most of your code so we can see if other things break it.
Your question doesn't really say what your looking to do, which doesn't help us help you.
If its anything like Possible same situation & answer #StackOverFlow
Hope this helps you!