I am converting a Static Page to Responsive Page. When I resized my page to a lower width then horizontal scroll-bar and some amount of margin is also appearing in the bottom and right side of last div/Footer.
I have used overflow property in my code but still I am not getting the desired result.
body {
margin:0%;
padding:0%;
overflow-x: hidden;
}.
Due to some problem with imgur, I am unable to upload an image of my problem.
Please, suggest me some advise.
try this
body {
overflow-x: hidden;
max-width: 100%;
}
Open developer tools (F12) and locate the block that goes beyond the border of the page but the best, show your page code.
overflow-x: hidden; os only for horizontal overflow: This still allows for a scrollbar at the right side for vertical scrolling.
overflow: hidden; is both for horizontal and vertival overflow.
Related
I am new to HTML and CSS and am creating a website for a basic university course. For a project, I have created 8 div cards highlighting the planets of the Solar System but cannot get the cards out of this fixed/unscrollable position.
This is the link to the current page state:
https://hollandtheperson.com/dight/250/website/planets.html
Any tips on how to fix this?
You have added overflow: hidden; for the CSS in the body tag, which hides the scrollbar essentially making the scroll feature unusable, if you remove it then it should work.
You can set the overflow-x instead of overflow to hidden, like so:
...
overflow-x: hidden;
...
This disables horizontal scroll but allows vertical scroll
The problem isn't really with it being fixed in place, but i can see why you got that impression.
You're using overflow: hidden; which means "if something doesn't fit, snip it off".
So, because the overflow has cut away everything wasn't already within the viewport - there is now nothing outside the viewport, and hence, no reason to allow scrolling.
Fixed the .card height and add overflow-x: hidden which give you scrolling card. Sample code given below:
.card{
// add additional code
height: 350px;
overflow-x: hidden;
}
Hi can see that you have added items in css of body tags which i guess you should remove in order make it scrollable feature those are
height: 100vh;
overflow: hidden;
Please check if that works hopefully it should be.
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;
}
I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.
I'd like to have a scrollbar at the bottom of the div but this CSS works only in Firefox, not Webkit browsers like Safari or Chrome.
div.hoge {
width: 500px;
overflow: auto;
}
I googled and found some pages mentioning you should use overflow-x or -webkit-overflow-scrolling but they didn't work either. Need to use some JSs? Any guesses?
If you need a scroll bar to appear always then, you can use overflow: scroll
If you need vertical scroller then, overflow-y: scroll
If you need only horizontal scroller then, overflow-x: scroll
As per the questions title: You can write mozilla specific styles like this
#-moz-document url-prefix() {
div.hoge {
width: 500px;
overflow: auto;
}
}
Here is an example fiddle of a div that scrolls on x. If you don't include the white-space: nowrap, then the text just wraps within the div and only the vertical (y-direction) scroll bar actually scrolls.
The fiddle shows two div elements; one with nowrap and one without. Also I put borders on the div to make it easier to see.
overflow: auto; doesn't make scrolling DIV, use overflow: scroll;
if you want it on any particular axis, then use overflow-x: scroll; or overflow-y: scroll;
Have you tried overflow-x:scroll; ?
Also make sure that the div.hoge has the enough height to display the scroll bar at the bottom.
I'm making a website with a large image at the top that extends past the far right of the page. The problem is that the browser keeps adding a horizontal scroll bar to allow the user to scroll to the end of this image but I don;t want it to do that.
Is there any way I can tell the browser to treat the image a bit like a background image or to simply stop scrolling after 940px?
http://www.electric-drumkit.com/404.php
There's an example of the page so you can get a better idea of what I mean.
The way to do it here is to:
Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.
Move these rules from body to #wrapper:
margin: 0 auto;
position: relative;
width: 960px;
Add this new CSS:
body {
min-width: 960px;
overflow: hidden;
}
Add this to get horizontal scrolling back when the window is less than 960px wide:
html {
overflow: auto;
}
Here's a live demo so you can quickly see if my answer will have the desired effect.
Tested in Firefox, Chrome, IE8.
Put the image into a div like this:
<div class="image"></div>
And in CSS you can write:
.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}
In this way, your div will render the image as a background, into a div, and i think there will be no scrolling.