I'm trying to position an image on my website that is wider than the resolution, which creates a horizontal scroll bar every time. I know someone who has a site with an image wider than the screen but his site doesn't cause you to scroll.
Does anyone know a code or a fix to the code that I can add to make the page unscrollable horizontally?
Thanks!
Add overflow-x: hidden to your <html> tag, or set the image as background-image instead, if the image is for design purpose and no content.
body {
overflow-x:hidden;
}
Related
I have a problem with my site, particularly when I open it from my smartphone.
The problem is that the scroll bar does not make me go up and cuts a part of my container, as you can see, the word REGISTER is very attached to the browser bar. Here's the picture: screen
On the computer this problem is not there, as you can see, there is a padding between the title and the container: screen
Please help me if anyone has the idea of how to fix it.
add this in your template style or after your style
<style>
*{
overflow-y :scroll;
}
</style>
i hope it was useful
Hi can anyone help me with this website ...to disable the scroll .. I would like the page to be fixed and fit the screen but without any scroll, and move, please. http://ivyonestudio.co.uk/
update your CSS to include
html {
overflow-y: hidden;
}
Days ago I made a simple splash screen that is currently fixed and sets a cookie when the user clicks the button (to never appear again).
Basically, It is just a div that appears in front of the main content of the page.
My problem is that even though the splash screen uses all the width and height, the scrollbar keeps appearing. I did not care about this at the first time, as it was position:fixed'd and the content was always there, impossible to move with scroll up or down.
Today I saw that on mobiles, when you scroll, sometimes you can see the content behind the splash screen.
So the main problem is the scroll bar. Therefore I decided to hide the scroll bar at all costs.
But overflow:hidden does not work.
It does not work also if I put position: relative to the parent of the splash.
How can I disable the scroll? Is there anyway I can do it with CSS? Should I use javascript to solve the problem?
Here is a fiddle of my splash and my home page:
http://jsfiddle.net/tomas2387/G8M4D/
As you can see, the splash screen is in front, but the scrolling is there, even though I use overflow:hidden.
Thanks
Adding:
html,body{
overflow:hidden;
}
Works for me
Alternatively- depending what you're specifically after, you may want to add:
html,body{
padding:0;
margin:0;
}
Then wrap everything after the modal--mobile-splashpage part within another element and hide this when the splash is being shown. You can then toggle the two (splash and content) as you see fit. See demo here
html,body{
overflow:hidden;
}
And when you hide splash screen just use jquery to get back scroll
$('html,body').css('overflow','auto');
Try this one:
body {
overflow-y: scroll;
position: fixed;
width: 100%;
}
http://www.barrdisplay.com/
Hey everyone - So the site I am working on has a header background that extends off the screen to the right.. My issue is that horizontal scrolling now occurs because of this.
My #Header has a width of 1450px - which is causing this issues.
How can I fix this issue?
Greg
use in your css
body{
overflow-x:hidden;
}
Note:It will be good to have a read and then use
http://css-tricks.com/the-css-overflow-property/
Header is a div box. If it is set to 1450 then the div is that wide and causing the horizontal scrolling. Set it to something smaller or a percent (like 100% which will go to the end of the page what ever size it may be) and the background will fill it in to that point.
If you need the background to stretch the entire way, then put the header background as a background for the page and tell it to not repeat and place the center of the image in the center of the screen.
I've created a website with a content-width of 800px.
However, when my user uploads a picture with a width of 900px, the site is totally out of order.
Is there a way to add a slider or scrollbar instead of the div getting bigger, when the images are too large for the website? If not, I think I have to resize the uploaded images..
Thanks in advance.
put style="overflow:auto;" on your div then it will produce a scroll bar when image is larger than your space
I assume that because you're talking about width, that you're wanting the content width to maintain at 800px and then default to scroll if content (in this case an image) is > 800px.
Perhaps you could take advantage of the overflow-x: scroll; property in CSS to only scroll horizontally. overflow: auto; may add the vertical scroll as well when not required.
You may need to supply a little bit of the code that you are using so we can figure out the problem, but what you could use is:
overflow: hidden;
That will stop anything being wider than your 800px content container.