I am trying to create a body container which takes up the whole space on my desktop screen which is what I want. However, when I resize it to the mobile screen, I want it to be responsive. It only takes up the quarter of space on a mobile screen. I also don't want my footer container and body container to overlap. I can fix it with overflow: auto. However, I don't want that to be the case. I don't want a user to scroll through my body, but rather static. Prefer my container to stick at the bottom. Here is the screenshot and my code:
HTML
<div class="header-container">
<i class="fa fa-space-shuttle fa-spinner fa-spin fa-3x"></i>
</div><br>
<div class="body-container">
<h1 class="body-title">The Mihir Chronicles</h1><br>
<div class="body-content">
<p>Hi, I am Mihir (me-here). I am a <strong>full-stack web developer</strong> and an entrepreneur based in Chicago. Previously, founded a social enterprise venture, <strong>Humble Pen</strong> and co-founded Royal Ace Investments.</p>
<p>Aside from my entrepreneurial endeavours, I’ve also worked for several venture-backed startups. Currently, I am a mentor at Dev Mountain. Lately, I've been fascinated by programming. Usually, I am on my computer learning new frameworks and technologies.</p>
<p>I am absolutely passionate about <strong>finance, programming</strong> and <strong>technology</strong>. I find <strong>art</strong> and <strong>astronomy</strong> to be absolutely cool. On the weekends, I volunteer as a <strong>Telescope Instructor</strong> at the Adler Planetarium. I usually read a lot when I am not working.</p>
</div>
<h2 class="body-end">-Mihir (me-here!)</h2>
<a href="http://themihirchronicles.tumblr.com"><button class ="btn" type="text">Enter!</button></a>
<!-- <button class ="btn" type="text">Essays</button> -->
</div><br>
<div class="footer-container">
<ul>
<li><a href="https://github.com/mihirchronicles"><i class="fa fa-github fa-2x"></i></a></li>
<li><a href="https://twitter.com/mihirchronicles"><i class="fa fa-twitter fa-2x"></i></a></li>
<li><a href="https://instagram.com/mihirchronicles"><i class="fa fa-instagram fa-2x"></i></a></li>
<li><a href="https://www.linkedin.com/in/mihirchronicles"><i class="fa fa-linkedin fa-2x"></i></a></li>
<li><a href="mailto:[email protected]"><i class="fa fa-envelope-o fa-2x"></i></a></li>
<li><a href="http://themihirchronicles.tumblr.com/"><i class="fa fa-rss fa-2x"></i></a></li>
</ul>
</div>
CSS
* {box-sizing: border-box;}
html, body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
.header-container {
color: #2789e5;
margin: 0 auto;
text-align: justify;
height: 15%;
width: 85%;
padding-top: 25px;
}
.body-container {
margin: auto;
text-align: left;
height: 60%;
width: 85%;
font-family: serif;
font-size: 12px;
/*overflow: auto;*/
border: dotted;
position: absolute;
left: 0;
right: 0;
}
.footer-container {
margin: 0 auto;
text-align: right;
width: 85%;
height: 10%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
border: dotted;
}
.body-title {
font-family: 'Reenie Beanie', cursive;
}
.body-content {
font-family: "Courier New", Courier, monospace;
}
.body-end {
font-family: 'Reenie Beanie', cursive;
}
ul li {
list-style-type: none;
float: left;
}
a {
color: #70a2d1;
}
ul li a i:hover {
opacity: .8;
}
li {
margin: 0 0 0 15px;
}
@media only screen and (max-width: 300px) {
.body-container {
font-size: 1.5em;
}
}
<meta name="viewport" content="width=device-width" />
Is what i think you mean. Place it in your
<head>
part, and try hope it works for you.
With media querys i cant help you because i hate them.
overflow-x:hidden;
overflow-y:auto;