Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I designed a website. Everything works on desktop but on mobile, it is not scrolling right or left. When I open the browser on my mobile, it is showing one-third of the website and won't let me scroll to the right. What is the problem and how do I fix this?
CSS
#container {
background-color: #f9cbdf;
width: 100%;
overflow: hidden;
background-image: url(images/webtreats_baby_pink_pattern_21.jpg);
background-repeat: repeat;
}
body {
margin: 0;
font-family: Helvetica, sans-serif;
}
Remove
overflow: hidden;
from #container.
When overflow: hidden; is used the overflow is clipped, and the rest of the content will be invisible
The default value for overflow is visible.In this case, the content is not clipped
If overflow is set to auto, the browser decides whether to clip or not.
See more about overflow here
You need to use `overflow:scroll , check the example
.overflow{
width:200px;
overflow:scroll;
}
<div class='overflow'>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
if you want to let the users scroll all sides and if you want only x axis useoverflow-x:auto;and for yaxis overflow-y:auto;`
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My background image, which covers the entire web page, overflows past the HTML and body elements, even though they're both set to 100%.
It's a simple page, as seen here.
I've tried several different techniques to place the background image (including setting it to cover, but I still encounter this overflow issue)
(I feel like I'm going a little crazy, but I'm probably missing something that's very apparent).
Try overflow:hidden
.translucent {
width: 100%;
height: 100%;
background-color: rgba(0, 92, 60, 0.95);
overflow: hidden;
}
I wonder why you set this in the body tag.
It's much easier to give the body tag a background-image.
So i changed your body css style to this:
body {
width: 100%;
height: 100%;
background: url('cover-plaza-707-fifth-construction.jpg') no-repeat center center fixed;
background-size: cover;
position: fixed;
}
And you now can delete <img src="cover-plaza-707-fifth-construction.jpg" id="bg">
I hope this solves the problem, i haven't tested the scrolling yet.
[After reverting it back to a cover background image rather than the standalone image I placed with reduced z-index as a bug fix]
Setting .translucent's min-height to 100% (rather than just height: 100%;) fixed the issue.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
This issue has had me scratching my head for a few days now. I have a website with a set CSS background with no scrolling - works well. However, on pages that are fairly long there appears an exact duplicate of the background, seemingly scrolling in FRONT of the other background.
You can see it illustrated on this page:
http://www.joyrocks.com/corporate/
I've scoured through the CSS and I'm sure I'm missing something simple, but I was hoping some fresh eyes could point me in the right direction. Cheers!
Edit: Got it solved! Sorry this may have been off-topic. Will keep that in mind in the future!
It took me a second to realize what was happening here. Now I'm not sure why it appears to be duplicated like that. Could have something to do with the background being fixed. I think your main issue here though is the body/html height.
body,html{
height: 100%;
}
That only sets the height of the viewport meaning there is still a lot of overflow that's not being covered by that.
I changed height to min-height and it seemed to have fixed the problem :)
body,html {
min-height: 100%;
}
You have a body:after rule that is applying the same style as your body.
There are two offending rules causing this:
body, body:after {
background: url('/wp-content/uploads/2014/05/background-new-2.jpg') top left fixed repeat;
}
body:after, ul.tabs li a.active:after {
content: "";
background: #FFF;
position: absolute;
z-index: 99;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
z-index: -1;
}
Remove the body:after definitions from those and you will be fine.
You must delete body, from this css line:
body, #section-tophat, #section-footer, #section-sub-footer
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I've applied html,body{width: 100%; overflow-x: hidden;} to hide the overflowing html but it's causing the scrollbar seems it has been written as overflow-x: auto;. Why is this happening?
here's the screen shot:
Tested in Firefox 26.0, Google Chrome Version 32.0.1700.76 m
If you are just wanting to remove the inner-vertical scrollbar, you would use the following instead:
html, body {
overflow-x: hidden;
}
body {
overflow-y: hidden;
}
Hide the horizontal scrollbar on both the html/body elements and specify overflow-y: hidden on the body element to remove the inner-vertical scrollbar generated. This will preserve the outer horizontal scrollbar on the html element.
Try this.....
html,body{width: 100%; overflow: hidden;}
Update:
Use width on elements like div,img tags and kept them inside 100% width, body will be width:100% and remove the overflow tag from body.
Use overflow on div tags if needed.
I just removed body from the line html,body{width: 100%; overflow-x: hidden;} which seems working perfect.
html{width: 100%; overflow-x: hidden;}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I've looked at every similar question I can find here. I have a div for my right column, and then a div for my footer. But if my right column gets too long, it covers up the footer. What is wrong?
Site: http://www.powerhousestudios.tv/2013/
On your DIV
<div id="rightcolumn">
CSS READS
#rightcolumn {
width: 300px;
float: right;
margin-top: 0px;
margin-bottom: 0px;
background-color: #ffffff;
height: 410px;
Remove the Height Parameter to fix your problem.
The rightcolumn div has a fixed height of 410px, which it seems it's not enough. Just remove the height property.
Your using relative positioning on the upcoming div. That with a z-index of 999 is making it cover your footer div.
Try:
upcoming { z-index: 0;}
and remove the spacing paragraphs in that div to get the effect you want.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
My background Image navbar isn't showing properly. If you notice, the gradient for the navbar doesn't display properly. The top half should be a light gray and the bottom half should be a darker gray. When the page firsts loads you can see it appear but then it all goes gray and loses the gradient look.
My site is usahvacsupply.com and I just edited my background-image to be bigger to fit for a 1600 width resolution. Here is a picture of my background image http://tinypic.com/view.php?pic=20ge8nl&s=5. Any help would be much appreciated.
Here is my css code for the background.
html, body{
margin: auto;
background-image:url('/images/Testing1/bg2.jpg');
background-repeat: no-repeat;
background-position:top center;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
min-width:1600px;
min-height:1400px;
top: 0;
left: 0;
}
Removing the float:left on div with ID lol seems to fix it.
Your table element #body has a background which is obscuring the gradient. Remove it and the gradient in your background appears.
Original
#body {
background-color: #F5F5F5;
overflow-y: scroll;
}
Modified
#body {
overflow-y: scroll;
}