Enable scrolling - html

Question

I have a script in CSS. I have no problem with this script on computers with big resolutions. But users that have a screen resolution like 1024 x 768 or smaller have problems with the html page. The script shows like 50% of the page and the user cant scroll to see the other 50% of the page.
How can I fix this
This is my code in CSS:
#contact2 {
padding-top: 0px;
padding-bottom: 0px;
background-color: black;
background :url(../images/contact-bg.jpg);
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#contact-us2 {
padding-bottom: 90px;
}
I have tried to add a overflow: scroll; element but this shows only the scroll bar. Scrolling is still disabled.

Answer 1

you should define a specific style section at the end of your css file, like the following
#media only screen and (max-width: 1024px) {
/* put here specific css for mobile */
#contact2 {
position: relative
overflow:auto;
}
#contact-us2 {
}
}

Answer 2

I have tried to add a overflow: scroll; element but this shows only the scroll bar
That happens because the content can fit inside the "contact2" div and there is no need for scrolling.
The second problem is that you haven't set a max-height and max-width property for your div. What 'min-height' does is that it defines the height the div should have, even when there are no contents in it. But it doesn't stop the div from resizing if the content can't fit inside the div, and that is the reason why your overflow: scroll isn't working.
The best solution would be to remove 'min-height' and 'min-width' from your code and just type this width and height:
#contact2 {
padding-top: 0px;
padding-bottom: 0px;
background-color: black;
background :url(../images/contact-bg.jpg);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#contact-us2 {
padding-bottom: 90px;
}
If you don't want to show the scrollbars when your content can fit inside the div and there is no need for scrolling you can use media queries.
https://www.w3.org/TR/css3-mediaqueries/
I hope this helps you. Feel free to comment below and I'll see what I can do.