So when in full screen on a desktop you can see that the footer is fine, but when resizing to a narrower screen the blue background for the footer disappears and the text for the footer stays in the middle of the screen.
We are creating this webpage for the biochemistry department at my school and reviving credit for it.
The html page is studentawards and the css is main and awards. The content is here in this repository.
Edit jsfiddle.
Edit 2 This seems to work just fine in jsfiddle, but it isn't on windows 10 Chrome, or firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="main.css" rel="stylesheet">
<link href="awards.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="teaching.html">Teaching</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="publications.html">Publication</a></li>
<li><a href="studentawards.html">Student Awards</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="sponsorLogo">
<img id ="logo" src="resources/Acs.png" alt="ACS" height="30%" width="30%"><br><br>
<img id ="logo" src="resources/nationalInstitudeofHealth.png" alt="ACS" height="30%" width="30%"><br><br>
<img id ="logo" src="resources/Nsf.png" alt="ACS" height="30%" width="30%"><br><br>
<img id ="logo" src="resources/Kbrin.png" alt="Kbrin" height="40%" width="40%"><br><br>
<img id ="logo" src="resources/Cinsam.png" alt="ACS" height="80%" width="80%"><br><br>
</div>
</nav>
<main>
<!--THIS IS WHAT GETS CHANGED ON THE DIFFERENT PAGES-->
<div class="awards">
<ul class="awardsItem">
<h3>KAS Undergraduate <br> Oral Presentation Competition</h3>
<hr class="horizontalRule">
<strong>2018: </strong><li>1st. Place Ayanav Roy</li>
<li>2nd. Place Quynh Nguyen</li>
<strong>2016: </strong><li>1st. Place Quynh Nguyen</li>
<strong>2015: </strong><li>1st. Place Alma Onate</li>
<strong>2014: </strong><li>3rd. Place Thuy Donna Do</li>
<strong>2013: </strong><li>1st. Place Thuy Donna Do</li>
<strong>2011: </strong><li>2nd. Place Adam McCallum</li>
</ul>
<ul class="awardsItem">
<h3>UR-STEM Summer Research Award</h3> <br>
<hr class="horizontalRule">
<strong>2018: </strong><li>Elizabeth Osifalujo</li>
<li>Kayla Laverne </li>
<strong>2016: </strong><li>Andrew Quillen</li>
<li>Quynh Nguyen </li>
<strong>2013: </strong><li>Emily Hogle</li>
<li>Janelle Tucker</li>
</ul>
<ul class="awardsItem">
<h3>NKU Dorothy Westerman Hermann <br> Undergraduate Research Award </h3>
<hr class="horizontalRule">
<strong>2018: </strong><li>Alex Rosen</li>
<strong>2017: </strong><li>Andrew Quillen</li>
<strong>2015: </strong><li>Alma Onate</li>
<strong>2014: </strong><li>Thuy Donna Do</li>
<strong>2013: </strong><li>Rebecca Kidney</li>
<strong>2012: </strong><li>Quintin Hauser</li>
<strong>2011: </strong><li>Eric Amato</li>
</ul>
<ul class="awardsItem">
<h3>ACS Undergraduate Award in <br> Organic Chemistry</h3>
<hr class="horizontalRule">
<strong>2016: </strong><li>Alma Onate</li>
<strong>2015: </strong><li>Thuy Donna Do</li>
<strong>2014: </strong><li>Timothy Dunn</li>
</ul>
<ul class="awardsItem">
<h3>Student Undergraduate <br> Research & Creative Awards (SURCA)</h3>
<hr class="horizontalRule">
<strong>2018: </strong><li>Quynh Nguyen</li>
</ul>
<ul class="awardsItem">
<h3>NKU Regents Award</h3> <br>
<hr class="horizontalRule">
<strong>2016: </strong><li>Alma Onate</li>
</ul>
<ul class="awardsItem">
<h3>NKU Greaves <br> Undergraduate Summer Research Award </h3>
<hr class="horizontalRule">
<strong>2018: </strong><li>Andrew Quillen</li>
</ul>
<ul class="awardsItem">
<h3>Cooper Research Excellence Scholarship</h3> <br>
<hr class="horizontalRule">
<strong>2018: </strong><li>Quynh Nguyen</li>
<strong>2015: </strong><li>Alma Onate</li>
<strong>2014: </strong><li>Thuy Donna Do</li>
</ul>
<ul class="awardsItem">
<h3>NKU Chemistry Department <br> Outstanding Senior Graduate</h3>
<hr class="horizontalRule">
<strong>2016: </strong><li>Alma Onate</li>
<strong>2015: </strong><li>Thuy Donna Do</li>
<strong>2014: </strong><li>Timothy Dunn</li>
</ul>
<ul class="awardsItem">
<h3>ACS Travel Award</h3>
<hr class="horizontalRule">
<strong>2011: </strong><li>Kevin Bonfield</li>
</ul>
</div>
<!--END OF WHAT CHANGES ON THE DIFFERENT PAGES-->
</main>
<div id="news">
<a class="twitter-timeline" date-width="600" data-height="100%" data-theme="light" href="https://twitter.com/SatisfactoryAF?ref_src=twsrc%5Etfw">Tweets by SatisfactoryAF</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<div id="footer">
<footer class="footer">
Copyright © Lili Ma, Ph.D.<br>
Department of Chemistry & Biochemistry, Office SC 448<br>
Northern Kentucky University at Highland Heights, KY 41099<br>
</footer>
</div>
</body>
any and all help would be appreciated, I am nearly positive it has to do with flex-box, but since my instructor seems to not know much about I am kind of shooting in the dark here.
any and all help would be appriciated.
Resources I have accessed:
- https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
- https://stackoverflow.com/questions/50429737/sticky-footer-with-flexbox
- https://stackoverflow.com/questions/30202294/flexbox-wraps-outside-of-container
- https://codepen.io/noahblon/post/practical-guide-to-flexbox-dont-forget-about-flex-shrink
none of the above seemed to hold what I needed
