We Keep Coding

How to style & toggle notifications list?

I made a nav bar using nav and li tags, including a notifications icon, I am trying to make notifications nested list to show notifications, and use JavaScript to toggle/hide the menu, so far no luck. I've been looking for snippets online to support my logic, but I am stuck in the styling part and the JavaScript functionality. code below:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
html {
scroll-behavior: smooth;
}
* {
font-family: 'Roboto', sans-serif;
font-style: normal;
padding: 0;
margin: 0;
text-decoration: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
::-webkit-scrollbar {
width: 1.32vmin;
}
/*
::-webkit-scrollbar-track{
border: 0.53vmin solid rgba(7, 67, 146, 0.17);
box-shadow: inset 0 0 0.33vmin 0.26vmin rgba(7, 67, 146, 0.17);
}
*/
::-webkit-scrollbar-thumb {
background: #074392;
border-radius: 0vmin;
}
::-webkit-scrollbar-button {
height: 7.45vmin;
background: #074392;
}
body {
font-weight: 400;
font-size: 2.12vmin;
background-color: #FFFFFF;
/*overflow: hidden;*/
height: 100%;
}
h1 {
margin-left: 3vmin;
}
h5 {
margin: 2vmin 3vmin;
position: absolute;
width: 14.72vmin;
font-weight: 500;
font-size: 2.65vmin;
letter-spacing: 0.79vmin;
color: #FFFFFF;
display: inline;
}
nav {
background-color: #074392;
height: 7.42vmin;
width: 100%;
/*position: relative;*/
/*overflow: hidden;*/
position: sticky;
top: 0;
}
img.logo {
margin: 1.855vmin 3vmin;
height: 3.5vmin;
width: 7vmin;
}
nav ul {
float: right;
margin: 1.855vmin 2vmin;
}
nav ul li {
display: inline-block;
}
nav ul li::before {
content: " ";
padding: 0vmin 0.5vmin;
}
nav ul li a {
color: white;
/*margin: 0vmin 1vmin;*/
/*border-top-left-radius: 1.326vmin;
border-top-right-radius: 1.326vmin;
border-bottom-left-radius: 1.326vmin;
border-bottom-right-radius: 1.326vmin;*/
}
a.active,
a:hover {
font-variation-settings: 'FILL' 1;
}
.checkbtn {
color: #ffffff;
float: left;
cursor: pointer;
display: none;
margin: 1.855vmin 3vmin;
}
#check {
display: none;
}
#check:checked~ul {
left: 0;
}
.dropdown {}
.dropdown .dropbtn {
cursor: pointer;
border: none;
outline: none;
background-color: #074392;
color: #FFFFFF;
}
.dropdown:hover .dropbtn,
.dropbtn:focus {
color: #FFFFFF;
font-variation-settings: 'FILL' 1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0743922B;
width: 37.5vmin;
overflow-wrap: break-word;
transform: translateX(-56%);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: justify;
}
.dropdown-content a:hover {
background-color: #0743922B;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<div class="container">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Menu">menu</i>
</label>
<h5>LOGO</h5>
<ul>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Home">home</i>
</li>
<!-- <li> <i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i> -->
<li class="dropdown"><button class="dropbtn" onclick="myFunction()"><i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i></button>
<div class="dropdown-content" id="myDropdown">
<div>Link 1</div>
<div>Link 2</div>
<div>Link asasdasdasdasdasdsadsadasdasdasdasd asddasdas asd asd asd dasd asd</div>
</div>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Tasks">task</i>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Profile">person</i>
</li>
</ul>
<script type="text/javascript" src="JS/ActiveTab.js"></script>
<script type="text/javascript" src="JS/ToggleNotifications.js"></script>
</nav>
<main>
<h1>Example Page</h1>
</main>
</div>

By default set a display: none on the dropdown element and set a display: block on the hover pseudo-class of the dropdown element so when a hover event is triggered the dropdown appears.
Also, you can use classList.toggle method to remove if exists or to add if not exist the class.
Remove
Just add the following to the .css:
#myDropdown {
display: none;
}
#myDropdown.show {
display: block;
}
Remove onclick="myFunction()". And replace the .js with:
const myDropdown = document.getElementById('myDropdown')
addEventListener('click', event => {
let dropbtn = event.target.closest('button.dropbtn')
if (!dropbtn) return myDropdown.classList.remove('show')
console.log('hii')
myDropdown.classList.toggle('show')
})

How to have my css navbar be proportional to the page

My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>

Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.

Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.

class text-content set into class slider but it is pushed down?

I am coding a very simple HTML CSS program and here is my problem.
I made a picture in id named slider, and I want to write some text into it. And as the tutorial, I wrote a class named text-content in the slider. Very easy to understand, right?
Here is all of my index.html code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('/assets/css/img/slider/slider1.jpg') top center / cover no-repeat;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<div class="text-description">We had the best time playing at Venice Beach!</div>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
That is all of my code.
Here is the tutorial's picture, as you can see, the text is in the picture
Because when I click on the picture, it said to me that it is in the slider.
As you can see in this picture
I thought that if the picture is in the slider, and the text-content is in the slider, the text-content must in the picture?
My question is, I put class text-content in id slider, but the class text-content is pushed down, as you can see in this picture
Could you please explain this problem to me? Thank you very much for your time.

I assume you want to make a Hero Image. You can move the text position up.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('https://images.unsplash.com/photo-1474692295473-66ba4d54e0d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=784&q=80') top center / cover no-repeat;
}
#slider .text-content{
position: absolute;
bottom: 25%;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<p class="text-description">We had the best time playing at Venice Beach!</p>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>

As you question that you want to create a hero image section and you facing some design issue. so you have to look for CSS properties that should you've to use. If you want a demo section like that then I can suggest you check this manual.
https://www.w3schools.com/howto/howto_css_hero_image.asp
You can redesign your section as you want.

For the #slider div, use display:inline-block:
#slider{display:inline-block}

How do i deal with responsive menu?

I'm trying to make a responsive menu but texts are coming down when im resizing my website.
When i'm resizing to a lower dimension like 637 x 400 "a empresa" "projetos" and "contato" they drop and come down.
nav {
height: 60px;
width: 100%;
background-color: #a23286;
color: #eee;
position: fixed;
text-align: center;
}
/* menu + logo dimensoes */
nav ul {
display: inline-block;
padding: 0;
margin: 0;
text-align: center;
}
nav li {
float: none;
display: inline-block;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
text-align: center;
padding: 17px 0;
color: #eee;
text-decoration: none;
}
nav ul li:hover {
border-bottom: 5px solid #a23286;
}
nav a#openup {
display: none;
}
Should i just create a query in css for this state and change the font of the text?
https://codepen.io/rfop2/pen/JjjBBRe

You can use a media query and set the interval between 400px and 637px and set the width of nav a to 85px.
#media only screen and (max-width: 637px) and (min-width: 400px) {
nav a {
width: 85px;
}
}
Your codepen: Codepen

You can just use css flex for this. See ul style below.
nav ul {
display: flex;
flex-wrap: no-wrap;
justify-content: center;
padding: 0;
margin: 0;
}
$(function() {
menu = $("nav ul");
$("#openup").on("click", function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(this).width();
if (w > 480 && menu.is(":hidden")) {
menu.removeAttr("style");
}
});
$("nav li").on("click", function(e) {
var w = $(window).width();
if (w < 480) {
menu.slideToggle();
}
});
$(".open-menu").height($(window).height());
});
$('.cf a').on('click', function(event){
if(this.hash !== ''){
event.preventDefault();
const hash = this.hash;
$('html, body').animate(
{
scrollTop: $(hash).offset().top
},
800,
function(){
window.location.hash = hash;
}
);
}
});
#import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');
/* corpo geral */
body {
font-family: 'Titillium Web', sans-serif;
margin: 0;
line-height: 1.6;
}
/* menu */
nav {
height: 60px;
width: 100%;
background-color: #a23286;
color: #eee;
position: fixed;
text-align: center;
}
/* menu + logo dimensoes */
nav ul {
display: flex;
flex-wrap: no-wrap;
justify-content: center;
padding: 0;
margin: 0;
}
nav li {
float: none;
display: inline-block;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
text-align: center;
padding: 17px 0;
color: #eee;
text-decoration: none;
}
nav ul li:hover {
border-bottom: 5px solid #a23286;
}
nav a#openup {
display: none;
}
/* logo no menu */
.logo{
float: left;
height: 50px;
}
.textoIn{
background-color: #a23286;
height: 400px;
}
h1{
margin: 0;
padding: 0;
padding-top: 100px;
text-align: center;
font-size: 30px;
color: black;
}
/* texto abaixo do menu */
#media screen and (max-width: 580px) {
nav {
height: auto;
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
background: #a23286;
border-bottom: 1px solid #555;
}
nav a:hover {
background-color: #a23286;
}
nav a#openup:after {
content: "|||";
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
/* IE 9 */
-webkit-transform: rotate(-90deg);
/* Safari and Chrome */
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 5px;
top: 20px;
}
nav a#openup {
display: block;
background-color: #a23286;
width: 100%;
position: relative;
}
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>JRConecte</title>
</style>
</head>
<body>
<!-- Menu -->
<div id="Menu">
<header>
<nav class='cf'>
<ul class='cf'>
<div class = "logo">
<img src="./img/logojrc.png">
</div>
<li>
INICIO
</li>
<li>
<a href='#atuacao'>ATUAÇÃO</a>
</li>
<li>
<a href='#equipe'>EQUPE</a>
</li>
<li>
<a href='#empresa'>A EMPRESA</a>
</li>
<li>
<a href='#projetos'>PROJETOS</a>
</li>
<li>
<a href='#contato'>CONTATO</a>
</li>
</ul>
<a href='#' id='openup'>JRConecte</a>
</ul>
</nav>
</header>
</div>
<!-- Texto inicial -->
<div id="home">
<div class='textoIn'>
<h1>
asdasdasddsadaasdasdsadadadsa
</h1>
</div>
</div>
<!-- Areas de Atuacao -->
<div>
</div>
<!-- Nossa Equipe -->
<div></div>
<!-- A empresa -->
<div>
</div>
<!-- Nossos Projetos-->
<div> </div>
<!-- Depoimentos -->
<div></div>
<!-- Fale Conosco -->
<div> </div>
<!-- Redes Socias -->
<div></div>
<script
src="http://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>

I'm adding <li> via my submit button and it is pushing past my div. My js function can't fix it

So I'm trying to make the page continue to add the list items without breaking past the body element as shown.
I would like to keep the all the list items within the body and div like the first few. My best idea on how to go through this is by using if statement at the bottom of the JS to rerun autoResizeDiv. Thanks for any help!!
JS
$(function() {
var $newItemButton= $('#newItemButton');
var $newItemForm= $('#newItemForm');
var $textInput= $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
// this prevents the form from submitting which you need
var newText=$('input:text').val();
$('li:last').after('<li>'+ newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('')
// this empties the text box so you can add a new entry
});
function autoResizeDiv() {
document.getElementById('page').style.height = window.innerHeight +'px';
// document.getElementById('newItemButton').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
if(document.getElementById('addButton').clicked == true) {
autoResizeDiv();
}
})
CSS
#media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>

Please have a look at your CSS and adjust the #page div to have overflow, or remove the height entirely.
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}

try changing your body height:100% to min-height: 100%;
making ul overflow-y:scroll also solves the problem, but a scroll bar may disrupt your look and feel