I am facing an issue with the container-about div. I have set its height to 100% so that the div occupies the entire width and height after the header div. The problem is that currently, I cannot scroll to view the full text.
It would be great if there was a way to display the text with a scroll on tablets and smartphones as well.
Thank you for your assistance.
<div class='header'>
<div class='header-container'>
</div>
</div>
<div class='container-wrapper'>
<div class='container-about'>
<div class='about-text'>
text goes here.....
........
</div>
</div>
</div>
link:
css:
* {
margin: 0 auto;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
font-size: 12px;
line-height: 1.5;
background: #000;
font-weight: 400;
}
.header {
top: 0px;
left: 0px;
width: 100%;
height: 100px;
position: fixed;
background: gray;
opacity: 0.8;
}
.header-container {
width: auto;
height: 100px;
margin: 0 10% 0 10%;
text-align: center;
}
.container-wrapper {
width: 100%;
height: 100%;
}
.container-about {
margin: 100px auto;
padding-bottom: 2%;
width: 100%;
height: 100%;
background: #FFF;
position: relative;
}
.container-about h3 {
padding: 0 10% 5% 10%;
font-family: 'Verdana', sans-serif;
font-size: 12px;
line-height: 150%;
font-weight: 400;
}