The page on my website is not scrolling. If there are more content than screen can fit you can not actually see it because scroll is not working. I'm not and CSS guru and I don't know if the problem is actually with CSS or HTML.
I've spend some time trying to understand the problem but i'm not a CSS guru so I hope someone can help me. The page is using tweeter-bootstrap and custom theme for it (which i did not write). When I don't include theme CSS file scrolling is working fine.
Part of my theme CSS file:
body {
color: #000;
font-family: 'Play', sans-serif;
font-size: 16px;
line-height: 25px;
background: #e0dbcd url('../images/bg.jpg');
letter-spacing:0.2px;
overflow: hidden;
}
remove overflow: hidden; from body in the bootstrap-theme.css file.
For someone who was in my scenario, this could be happening because of height: 100% for html, body in angular-material.css. Remove it and you're good to go.
Remove overflow: hidden; from body as #Nabbit suggested or set overflow: scroll;
Edited:
The overflow property controls what happens to content that breaks outside of its bounds. By default, the property is visible i.e. content is not clipped when it proceeds outside its box.
overflow: hidden; means overflowing content will be hidden.
overflow: scroll; this is similar to hidden except users will be able to scroll through the hidden content.
This may not be relevant for anyone, but i'm going to comment it here anyway - I was using a
pseudo :after
element on the body, and had applied
position: fixed
below a certain viewpoint to the css, however I had put
.classname
and not
.classname:after
on the element. I'll post the CSS below. what this did was fix the position of the page so it could not scroll.
full CSS that's relevant:
body {
background-color: #5c2028;
color: #ffffff;
min-width: 100%;
min-height: 100%;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
overflow-x: hidden;
}
body.bg{
background-image: url('../img/background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-clip: none;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
body.bg:after{
content : "";
background-image: url('../img/hildasball_7_d_s_bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-clip: none;
display: block;
position: fixed;
top: 0;
left: 0;
opacity : 1.0;
z-index: -2;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
/*width: auto;
height: auto;*/
}
#media (max-width: 767px) {
body{
min-height: 800px;
}
/* Initially, i put body.bg not body.bg:after, which made things not scroll and i ended up getting confused as hell */
body.bg:after{
position: fixed;
}
.floatContact {
float: none;
}
}
I agree will all above said, something to add I recently discovered in my code is the following CSS added.
* {
-moz-transition: .5s ease-in-out;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
This also can interfere with the HTML & body scrolling. So I would recommend adding this transition effect in the specific component you desire to have the effect rather than on the HTML & body.
Related
The white gap seems to be a popular issue. Yet I dont seem to be able to solve it with conventional solutions.
link to website https://bomengeduld.github.io/debadkamers/
link to style.css: https://github.com/bomengeduld/debadkamers/blob/master/style.css
(use inspector in mobile view) to detect the bug:
.mainmenu-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999999;
-webkit-transition: 0.3s;
transition: 0.3s;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px !important;
padding: 0px !important;
}
When I use the following it gets fixed, but then I loose the styling of menu bar.
overflow-x: hidden;
The following solved my problem
.container {
overflow: hidden;
}
Here is my code:
#my_div:before
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
}
<div id="my_div"></div>
I'm trying to make the image responsive through the max-width:100% property but it is not working
My Question: Is it possible to do such a thing?
Edit
The question is not a duplicate, I want the dimensions to scale automatically on screen resize while the other question sets a fixed size to the image
Try this:
#my_div:before
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
height: auto;
}
If this doesn't work, try removing the :before pseudo-element
#my_div
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
height: auto;
}
Without seeing the context of your html, this is the best solution I can offer. We'll need more information in order to understand your situation better.
I confess I'm not entirely sure what effect you are after but I think this might be a better option for you.
Don't put the image in the content property...make that pseudo-element 100% size of the div and use a background image.
A couple of options for you.
.my_div {
position: relative;
height: 150px;
border: 1px solid grey;
width: 75%;
margin: 1em auto;
}
.my_div:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background-image: url(http://lorempixel.com/g/400/200/);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.cover:before {
background-size: contain;
}
<div class="my_div"></div>
<div class="my_div cover"></div>
JSfiddle Demo
I've wrote a little experiment for a parallax background header using only CSS: http://codepen.io/Kageetai/pen/yIdAq?editors=110
It's works very well in Chrome but in Firefox the header has a strange behaviour, even though Codepen uses -prefix-free. The background images shoves itself on top of the content below and the jumbs after scrolling down a bit.
It uses the technique found here, which I think is very elegant. So I copied most of it and wanted to apply it for a header.
I suppose it has something to do with that part, which mainly makes the parallax happening:
.parallax {
position: relative;
//padding: 25vh 10%;
padding: 0.1px; // strange behaviour with padding 0
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
transform-style: inherit;
background: 50% 50% / cover;
&:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
background: 50% 50% / cover;
}
}
header {
text-align: center;
color: whitesmoke;
&:before {
background-image: url(http://www.theloftberlin.com/wp-content/uploads/2013/09/2013-berlin.jpg) !important;
transform: translateZ(-1px) scale(2);
z-index:-1;
}
}
And furthermore the fixed navigation isn't fixed at all on Chrome and Firefox.
Anyone any ideas?
Thanks!
Add position:relative to your #wrapper that will fix overlapping of image on the text.
add z-index="2" to .nav
check the codepen here Code pen
So my problem is with using a css mask to hide a position: fixed; item. Reason being because apparently overflow: hidden; doesn't work. So this actually works swimmingly in all the browsers I've tested it in UNTIL the height of the div containing the mask reaches a specific, seemingly arbitrary, height. ( 1280px on iPad, 2000px in desktop Safari )
I'm totally stumped on this and haven't found anyone with any documentation on this issue. Has anyone worked with css masks at all to maybe have some clues as to why this is the case?
Here's a screencast demoing the bug and the code used to generate it.
https://www.dropbox.com/s/bxzsmkqgll1yeix/Screeny%20Video%20Feb%2010%2C%202014%2C%209.18.28%20PM.mov
And here's a zip with the code used in that demo.
http://cl.ly/Tqy7
Any ideas or proposed solutions?
--- HTML ---
<div class="attn hairline"></div>
<div class="shadow"></div>
<div id="home">
<div class="attn blur"></div>
<div id="content">
<p>Hey, here is some awesome content, stuff you will definitely want to read.</p>
</div>
</div>
--- CSS ---
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
text-align: center;
background-color: #f0f0f0;
}
.attn {
position: fixed;
width: 80%;
height: 100%;
left: 50%;
margin-left: -40%;
background: no-repeat center;
background-size: 100% auto;
}
.hairline {
background-image: url(../img/attn.svg);
}
.blur {
background-image: url(../img/blur.png);
}
.shadow {
position: relative;
height: 20px;
margin-bottom: -20px;
box-shadow: 0px -3px 6px rgba(0,0,0,.1);
top: 100%;
}
#home {
position: relative;
top: 100%;
background: #fff;
mask: url(../img/mask.svg);
-webkit-mask: url(../img/mask.svg);
-o-mask: url(../img/mask.svg);
-ms-mask: url(../img/mask.svg);
/* 1281px will kill the mask on iPad, 2001px will kill it on the desktop */
height: 1280px;
}
#content {
padding: 10% 5%;
}
What I ended up doing was setting a max-height attribute on the masked element until that element got to the top of the browser window. I had the fuzzy image text disappearing at this point anyway so it was a good time to, once the image was gone, remove that max-height attribute. Works great, though I'd still love to solve the original problem someday. I'm guessing its a browser quirk though seeing as how it was so arbitrarily consistent.
I'm designing a web site
http://zinzinzibidi.com/TurkAntivirusResponsive/Anasayfa
It has a white space problem at right side.
http://www.responsinator.com/?url=http%3A%2F%2Fzinzinzibidi.com%2FTurkAntivirusResponsive%2FAnasayfa
You can see there is an extra "scroll X" area at 320px width;
My CSS file: http://zinzinzibidi.com/Areas/TurkAntivirusResponsive/Content/css/style.css
I can't see any wrong code at my CSS.
How can I fix it?
I was check you site, extra "scroll x" area is in all format
try to avoid width and fixed width
use width=100% instead
Ok, you put
html {
font-family: sans-serif;
overflow-x: hidden;
}
its hide scroll but not solve your problem
1st you menu
.nav-mobile {
margin: auto;
position: relative;
width: 320px; <-- delete or put 100%
}
next line
.nav-mobile-button {
border-bottom: 1px dotted #777777;
cursor: pointer;
font-weight: bold;
height: 60px;
line-height: 60px;
margin: auto;
position: relative;
text-align: center;
transition: all 0.2s ease-in-out 0s;
width: 320px; <-- delete or put 100%
}
That's just some of your lines to manage experiment whit your css
you have some padding that force some div sections out of screen