Responsive Slider positioning - javascript

I'm building a responsive website but i'm struggling with the dots of the slideshow as you see in the picture below which is when I toggle to the device toolbar they change their place i have tried everything that comes in my mind from the relative units to the absolute ones but nothing worked please I need help with that, i searched around in google and so on but i didn't find anything helpful.
when I toggle to the device toolbar:
as you notice the position of the dots changes i don't want this behaviour.
this is my code:
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EatManger</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="query.css">
</head>
<body style="background-color:purple">
<div class="container">
<div class="logo-box">
<img src="images/logo.png" class="logo" alt="logo">
</div>
<i class="fas fa-bars hamburger-btn"></i>
<ul class="main-nav">
<li class="main-nav-item"><a class="main-nav-link" href="#">services</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">reservation</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">menu</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">our chefs</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">events</a></li>
</ul>
</div>
<div class="slideshow-container">
<div class="mySlides fade-zz">
<img src="images/food3.png" class="imgSlide">
</div>
<div class="mySlides fade-zz">
<img src="images/pizza.png" class="imgSlide" >
</div>
<div class="mySlides fade-zz">
<img src="images/hamburger2.png" class="imgSlide">
</div>
<div class="dotz">
<span class="dot" onclick="currentSlide(1-1)"></span>
<span class="dot" onclick="currentSlide(2-1)"></span>
<span class="dot" onclick="currentSlide(3-1)"></span>
</div>
</div>
<div class="contact-box">
<div class="adress">
<i class="fas fa-map-marker-alt conbox"></i>
<h3 class="contact-title">Address</h3>
<p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
</div>
<div class="phone">
<i class="fas fa-phone-volume conbox"></i>
<h3 class="contact-title">Phone</h3>
<p class="contact-description">636-399-9776 <br> 573-225-7350</p>
</div>
<div class="opening-time">
<i class="far fa-clock conbox"></i>
<h3 class="contact-title">Opening time</h3>
<p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
</div>
</div>
<section class="about-us">
<i class="fas fa-utensils abicon"></i>
<h1 class="title">About us</h1>
<p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un
imprimeur
anonyme assembla </p>
</section>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 4rem;
background-color: red;
transition: height .1s;
}
.container-add{
height: 20rem;
}
.hamburger-btn {
position: absolute;
margin-top: 5px;
right: 4px;
font-size: 40px;
color: white;
}
.logo-box {
display: inline-block;
}
.logo {
width: 100px;
}
.main-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 15.62rem;
align-items: center;
visibility: hidden;
}
.main-nav-hide{
visibility:visible;
}
.main-nav-item {
list-style: none;
color: white;
font-family: Roboto;
text-transform: uppercase;
font-weight: 700;
/* display: none; */
}
.main-nav-link {
text-decoration: none;
color: inherit;
padding-left: 20px;
}
.slideshow-container{
margin: auto;
max-width: 980px;
width: 100vw;
}
.imgSlide{
width: 100%;
}
.imgSlide-show{
display: block;
}
.dotz{
text-align: center;
position: absolute;
top: 35%;
left: 50vw
}
.dot{
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background-color: #ddd
}
.active{
background-color: #ff9900;
}
.active:hover,.dot:hover{
cursor: pointer;
}
.fade-zz{
animation-name: fade;
animation-duration: 1.4s;
transition:.4s
}
#keyframes fade {
from{
opacity: .4;
}
to{
opacity: 1
}
}
.contact-box{
background-color: red;
position: relative;
top: -1.39rem;
height: 380px;
}
.conbox{
color: white;
display: block;
text-align: center;
font-size: 2rem;
/* margin-top: .8rem; */
}
.adress{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: 3rem;
position: relative;
top: .5rem;
}
.phone{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: .8rem;
}
.opening-time{
color: white;
text-align: center;
font-family: roboto;
margin-top: 2rem;
}
.about-us{
color: white;
}
.title{
text-align: center;
font-family: roboto;
}
.abicon{
text-align: center;
display: block;
padding-right: 7rem;
margin-top: 1rem;
font-size: 2rem;
position: relative;
top: 2%;
}
.title-description{
display: block;
margin: auto;
}
JavaScript
//HAMBURGER BUTTON
var hamBtn=document.querySelector(".hamburger-btn");
hamBtn.addEventListener("click",function(){
document.querySelector(".main-nav").classList.toggle("main-nav-hide");
document.querySelector(".container").classList.toggle("container-add");
});
//SLIDESHOW
slideIndex=0;
function currentSlide(n){
slideIndex=n;
showSlide(slideIndex);
}
function showSlide(n){
var i;
var slides=document.getElementsByClassName("mySlides");
console.log(slides);
var dots=document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display="none";
}
slideIndex++;
if (slideIndex>slides.length) {
slideIndex=1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
setTimeout(showSlide,50)
setInterval(showSlide,6000)
sorry about the question title i couldn't come up with a better one describing my situation any suggestion for a better title would be accepted to help other people who are struggling from the same problem find the solution and thank youu in advance.


just add to ".dotz" the following
.dotz{
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
}
To center any block has position:absolute you just need to left, right to 0 and margin to auto and for sure the parent div has to have position:relative

Related

Navigation menu sidebar not closing with click on document

I made the header menu of my website become a sidebar with the screen width. Everything was working fine, the menu could be toggled by clicking the icon. But then i noticed the majority of websites had this property that the menu would close if the user clicks anywhere in the screen. I tryed everything i could but everythime i add the event listener to the code (to remove the class that makes the menu visible), the onclick event that adds the class stops working.
HTML:
<!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>Portfolio.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="Favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="Favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="Favicon/favicon-16x16.png">
<link rel="shortcut icon" href="Favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="Favicon/site.webmanifest">
<link rel="stylesheet" href="https://unpkg.com/boxicons#latest/css/boxicons.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div id="container">
<nav id="nav-bar">
Portfolio.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#habilities">Competências</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">&#9776</h3>
</div>
</nav>
</div>
</header>
<!-- Sections -->
<main>
<section id="hero"> <!-- Main section -->
<div id="hero-txt">
<h2>
Seja bem vindo, eu sou
</h2>
<h1>
Yan Calvo
</h1>
<p>
Estudante de Ciência da computação e desenvolvedor web
</p>
<div class="social">
<i class='bx bxl-linkedin' ></i>
<i class='bx bxl-github' ></i>
</div>
</div>
</section>
<section id="about-me"> <!-- About section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Sobre mim</h2>
<p>
Sou estudante de Ciência da computação, também
focado em aprender tecnologias de forma
independente. No momento me encontro dedicado a
aprimorar as minhas habilidades através da
experiência profissional e contato com outros
profissionais dedicados.<br><br>
O que mais me entusiasma em trabalhar com programação é poder projetar e criar coisas que tenham propósito e resolvam problemas reais.
Apoiar-se na pesquisa e percepção do cliente, encontrar as formas certas e dinâmicas de resolver determinados problemas, aprender com o processo e, em seguida, iterar e melhora-lo é a chave para um ótimo design.
</p>
</div>
<div class="container reveal fade-left">
<h4 id="quote">
“<br>
Knowledge has to be improved, challenged, and increased constantly, or it vanishes.<br>
”
</h4>
<h5>― Peter Drucker</h5>
</div>
</section>
<section id="experience"> <!-- Experience section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Onde trabalhei </h2>
<p>
Ainda em busca de oportunidades profissionais
</p>
</div>
</section>
<section id="projects"> <!-- Projects section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Projetos</h2>
<p>Trabalhos pessoais</p>
</div>
<div id="portfolio-content" class="container reveal fade-left">
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
</div>
</section>
<section id="habilities"> <!-- Contact section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Competências</h2>
<div id="habilities-container">
<div id="hability-icons-container"></div>
<img id="hability-icon" src="Img/icons8-javascript-144.png" alt="">
<img id="hability-icon" src="Img/icons8-html-5-144.png" alt="">
<img id="hability-icon" src="Img/icons8-css3-144.png" alt="">
<img id="hability-icon" src="Img/icons8-git-144.png" alt="">
<img id="hability-icon" src="Img/icons8-github-128.png" alt="">
<div id="habilities-description"></div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer">
<div id="footer-copyright">
<h6>Projetado por Yan Calvo</h6>
</div>
<div id="social">
<h6>Email para contato: yancalvo#gmail.com</h6>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
body {
position: relative;
background-color: #ece7e1;
}
html, body {
overflow-x: hidden;
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(27,26,33,255);
z-index: 200;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-brand {
color: white;
text-decoration: none;
font-size: 30px;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
font-style: italic;
}
#resume-btn {
width: 100px;
font-weight: bold;
font-size: 15px;
color: rgba(27,26,33,255);
background-color: #ece7e1;
border-radius: 23.5px;
border-style: solid;
border-color: #ece7e1;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, width 1.0s;
}
#resume-btn:hover {
width: 150px;
}
/* Sections */
main {
padding-top: 70px;
}
section {
padding: 0px 100px;
}
#hero {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
grid-gap: 4rem;
}
.social a {
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(27,26,33,255);
font-size: 17px;
margin-right: 22px;
margin-bottom: 30px;
margin-top: 20px;
}
.social a:hover{
transform: scale(1.1);
transition: .5s;
}
#about-me {
background-color: #191919;
min-height: 500px;
padding-top: 40px;
margin-bottom: 100px;
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 2rem;
white-space: normal;
}
#experience {
min-height: 300px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
justify-content: center;
text-align: center;
white-space: normal;
}
#projects {
background-color: #191919;
min-height: 800px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
grid-gap: 2rem;
}
#portfolio-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, auto));
grid-gap: 2rem;
align-items: center;
margin-top: 5rem;
text-align: center;
cursor: pointer;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
transition: all .40s;
}
.layer:hover{
background: linear-gradient(rgba(0,0,0,0.5) 0%, #191919);
}
.layer h3{
position: absolute;
width: 100%;
font-size: 25px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
margin-bottom: 7px;
}
.layer:hover h3{
bottom: 52%;
opacity: 1;
}
.layer h5{
position: absolute;
width: 100%;
font-size:17px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
}
.layer:hover h5{
bottom: 48%;
opacity: 1;
}
.col {
position: relative;
}
.col img {
max-width: 100%;
width: 550px;
height: auto;
object-fit: cover;
border-radius: 12px;
}
#habilities {
min-height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
text-align: center;
}
li {
list-style: none;
}
h1 {
font-size: 90px;
color: rgba(27,26,33,255);
margin: 10px 0px 25px;
}
h2 {
font-size: 30px;
margin-bottom: 60px;
}
#about-me h2,
#projects h2
{
color: #ece7e1;
}
#experience h2,
#habilities h2 {
color: #191919;
}
#habilities-container {
display: flex;
flex-direction: column;
align-items: ;
}
#hability-icon {
width: 144px;
height: 144px;
transition: all 0.8s;
}
#hability-icon:hover {
height: 155px;
width: 155px;
}
h6 {
font-size: 20px;
color: white;
}
h4 {
font-size: 40px;
color: #ece7e1;
font-style: italic;
}
h5 {
color: rgba(27,26,33,255);
}
p {
color: gray;
text-align: justify;
}
#footer {
background-color: #191919;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-left {
animation: fade-left 0.5s ease-in;
}
.active.fade-right {
animation: fade-right 0.5s ease-in;
}
#keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#media only screen and (max-width: 1015px) {
#nav-menu {
position: fixed;
top: 70px;
right: -100%;
display: block;
background-color: rgba(27,26,33,255);
margin: 0;
height: 100%;
-webkit-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
-moz-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
width: 250px;
transition: all 0.3s ease;
}
#nav-menu.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
color: white;
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
#brush-img {
display: none;
}
#about-me {
display: flex;
flex-direction: column;
}
}
Javascript:
//Toggle sidebar
const navContainer = document.getElementById('nav-menu')
function handleMenuToggle() {
navContainer.classList.add('show-nav')
}
document.onclick = function(e) {
if (e.target.id !== 'nav-menu' && e.target.id !== 'show-nav') {
navContainer.classList.remove('show-nav')
}
}
//Scroll animation
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
I just cannot make it work, i'm probably missing something or making some ugly mistakes in the structure of the code.

By taking a look at : this question you could try to do it this way : create a navbar sublcass called like :
navbar.open , and assign it these css properties :
/* If you use an id use #id_name or .classname if you use a class
*/
#id_of_navbar.open {
right: 0;
}
/* OR
.classname.open {
right: 0;
}
*/
And then add to your javascript :
var yournavbar = document.getElementById("id_of_navbar")
//Close menu when document is clicked anywhere
document.onclick = function () {
yournavbar.classList.remove("open");
};
And if you want your navbar to close if you click a part of it, just add this function :
//stop propagation on the side nav element
yournavbar.onclick = function(e) {
e.stopPropagation()
}
I tried that solution and it worked for me so I really hope it helps! Let me know if you are still trying to make it work without success despite this solution.

h1 element in div behaving differently with other divs

So I have looked everywhere on stack overflow and counldn't find someone with a similar issue. I have two classes in the main body with a few different images in the divs. I am planning on switching through them with a slideshow using Jquery. The problem is that the h1 element which is "Boba Fusion" is inline in the first class but is on top of eachother in the second class so that boba is on one line and fusion is on another line. I have linked my HTML and CSS.
What is causing the H1 to behave differently?
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#800&display=swap');
* {
margin: 0px;
padding: 0px;
font-family: 'Montserrat', sans-serif;
}
/* CSS stylings for nav */
a {
text-decoration: none;
color: inherit;
}
.container {
display: flex;
width: 100%;
}
nav ul {
margin-top: 0px;
background-color: #4B4B4B;
margin-left: 0px;
clip-path: polygon(1% 0, 100% 2%, 1000% 10000%);
}
nav ul li {
display: inline-block;
list-style: none;
padding-left: 100px;
font-size: 15px;
color: white;
margin-top: 0px;
padding-bottom: 33px;
flex: 2 0 0;
}
nav ul li:first-child {
padding-left: 90px;
margin-left: 0px;
}
nav ul li:nth-child(6) {
padding-top: 20px;
padding-right: 30px;
margin-right: 0;
}
#bobaimg {
padding-left: 25px;
padding-top: 10px;
margin: 0;
display: block;
flex: 1 0 0;
}
/* CSS styling for main content*/
.main-page {
display: none;
margin-top: 0px;
text-align: center;
min-height: calc(100vh - 40px);
background-size: 1300px 700px;
color: white
}
.main-page-2 {
/* display: none; */
margin-top: 0px;
text-align: center;
min-height: calc(100vh - 40px);
background-size: 1300px 700px;
color: white
}
#specials-head {
padding-top: 50px;
}
.fusion-head {
padding-top: 120px;
float: left;
position: absolute;
padding-left: 30px;
transform: scale(1.2);
}
#fusion-title {
float: left;
position: absolute;
padding-left: 110px;
transform: scale(1.4);
}
#about-img {
transform: scale(0.8);
margin-top: 40px;
float: left;
}
#why-choose {
transform: scale(12);
margin-top: 200px;
position: absolute;
float: left;
padding: 0;
margin-left: 200px;
left: 0;
width: 120%;
}
#quality {
transform: scale(0.8);
margin-left: 470px;
margin-top: 250px;
}
#flavour-btn {
margin-bottom: 70px;
margin-top: 280px;
margin-left: 800px;
color: gray;
background-color: white;
border: none;
transform: scale(1.7);
padding: 10px;
font-size: 10px;
font-weight: lighter;
/* display: none; */
}
#flavour-btn:hover {
cursor: pointer;
transform: scale(1.8);
}
#slideshow {
padding-top: 100px;
padding-bottom: 50px;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: white;
border-radius: 10%;
display: inline-block;
transition: background-color 0.6s ease;
transform: scale(1.2);
}
.active,
.dot:hover {
background-color: #717171;
}
/* CSS styling for footer*/
.footer {
margin-top: 10px;
margin-bottom: 0px;
}
.footer1-ul li {
display: inline-block;
list-style: none;
padding-right: 10px;
transform: scale(0.65);
padding-bottom: 0px;
margin-bottom: 0;
padding-top: 0px;
color: gray;
}
.footer1-ul {
padding-top: 0px;
padding-bottom: 0;
float: left;
}
.footer2-ul {
float: right;
margin: 0;
padding: 0;
}
.footer2-ul li {
display: inline-block;
margin-left: 0px;
list-style: none;
padding-right: 10px;
transform: scale(0.65);
padding-bottom: 0px;
color: gray;
}
<!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">
<link rel="stylesheet" href="about.css">
<title>Boba Fusion</title>
</head>
<body class='main'>
<!-- top nav bar and logo -->
<div class="container">
<div id="bobaimg">
<img src="/images/Boba Fusion logo (1).svg" alt="picture of bubble tea" width="150px">
</div>
<div id="nav">
<nav class='main-nav'>
<ul class="nav-ul">
<li>
Home +
</li>
<li>
Menu +
</li>
<li>
Specials +
</li>
<li>
About Us +
</li>
<li>
Win Prizes +
</li>
<li>
<img src="/images/cart-shopping-solid.svg" width="30px">
</li>
</ul>
</nav>
</div>
</div>
<!-- Main content -->
<div class="main-page" style="background-image: url(/images/aboutUs-back.png);">
<div id="specials-head">
<img src="/images/aboutus.png">
</div>
<div class="fusion-head">
<h1 id="fusion-title">
Boba Fusion
</h1>
<img src="/images/textbox-about.png" id="about-img">
</div>
<div>
<button type="button" id="flavour-btn">Our Flavours</button>
</div>
<div style="text-align:center" id="slideshow">
<span class="dot" onclick="currentSlide1()"></span>
<span class="dot" onclick="currentSlide2()"></span>
</div>
</div>
<div class="main-page-2" style="background-image: url(/images/aboutUs-back.png);">
<div id="specials-head">
<img src="/images/aboutus.png">
</div>
<div class="fusion-head">
<h1 id="fusion-title">
Boba Fusion
</h1>
</div>
<div class="fusion-head">
<img src="/images/why choose.png" id="why-choose">
</div>
<div>
<img src="/images/quality.png" id="quality">
</div>
<div style="text-align:center" id="slideshow">
<span class="dot" onclick="currentSlide1()"></span>
<span class="dot" onclick="currentSlide2()"></span>
</div>
</div>
<!-- footer -->
<footer class="footer">
<ul class="footer1-ul">
<li>
<img src="/images/location-dot-solid.svg" alt="location icon" width="15px"> 123 Name Street, Toronto, ON, M6E 1T9
</li>
<li>
<img src="/images/phone-solid.svg" alt="phone icon" width="15px"> (+1) 416 456 789
</li>
<li>
<img src="/images/envelope-solid.svg" alt="email icon" width="15px"> boba#fusion.com
</li>
</ul>
<ul class="footer2-ul">
<li>
<img src="/images/facebook-brands.svg" alt="location icon" width="15px">
</li>
<li>
<img src="/images/twitter-brands.svg" alt="phone icon" width="15px">
</li>
<li>
<img src="/images/youtube-brands.svg" alt="email icon" width="15px">
</li>
<li>
<img src="/images/linkedin-brands.svg" alt="email icon" width="15px">
</li>
</ul>
</footer>
<script src="about.js"></script>
</body>
</html>

You are using "transform: scale(1.2);" for the class ".fusion-head"
so it scales your h1 once (because the h1 is inside it).
Then you are using "transform: scale(1.4);" for id "#fusion-title"
so it scales it twice.

One suggestion on your issue. Since you want the h1 element keeps the same style in both div. You can try to have a default CSS style in your file.
h1 {
...
}

How do I make the event listeners work for the appended elements?

I have set up a shopping cart and I'm trying to get the items to add and remove items. The items I appended on the event listeners are not working. In my Javascipt, I have the sliding animation for when you click the cart button. Then I have a for loop for all the input fields to be marked as one. Then I have two functions that are the 'addtocart' and 'remove' and they are self explanatory
HTML:
<!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>E-Commerce Website</title>
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
<script src="app.js"async></script>
</head>
<body>
<div class="wrapper">
<div class="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">3</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li>
<li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li>
<li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number" class="qinput" id="qinput"><button class="removebtn">Remove</button></li>
</ul>
<div class="carttotal">Total: $64.66</div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt2</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt3</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt4</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt5</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt6</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar{
display: none;
}
.wrapper{
overflow-x: hidden;
}
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav{
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
margin-right: 2.5%;
}
.navcartcontainer{
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover{
transform: scale(1.15);
}
.p1{
height: 100vh;
position: relative;
}
.p1 img{
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after{
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.7s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 2.2rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: 160vh;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
}
.itemcontainer{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
JAVASCRIPT:
let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')
let qinput = document.getElementsByClassName('qinput')
cartbtn.addEventListener('click', function(){
cartbody.classList.toggle('cartbodyactive')
})
closeicon.addEventListener('click', function(){
cartbody.classList.remove('cartbodyactive')
})
for(let i = 0; i < qinput.length; i++){
qinput[i].value= 1;
}
function removeitem(){
for (i = 0; i < removebtn.length; i++){
let rbutton = removebtn[i];
rbutton.addEventListener("click", function (){
let TotalNumbervalue = TotalNumber.innerHTML
if(TotalNumbervalue > 0){
TotalNumber.innerHTML--
console.log('if statement for negative works')
}
rbutton.parentElement.remove()
})
}
}
removeitem()
function additemtocart(){
for (i = 0; i < Atc.length; i++){
let button = Atc[i];
button.addEventListener("click", function (){
let TotalNumbervalue = TotalNumber.innerHTML
if(TotalNumbervalue > -1){
TotalNumber.innerHTML++
}
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
let cartrow = document.createElement('div')
let cartitems = document.getElementsByClassName('cartitems')[0]
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" id="qinput"><button class="removebtn">Remove</button></li>`
cartrow.innerHTML = cartrowcontent
cartitems.append(cartrow)
})
}
}
additemtocart()

You can simplify your logic significantly by using event delegation (see: click event). You add a single eventListener to the document body (or any shared ancestor of the buttons/events you want to delegate) and based on the target of the event trigger the appropriate callbacks.
function addItemToCart(item) {
console.log('add: ', item);
// ...
}
function removeItemFromCart(item) {
console.log('remove: ', item);
// ...
}
function handleDocumentClick(event) {
if (event.target.classList.contains('atcbtn')) {
addItemToCart(event.target.parentElement);
}
if (event.target.classList.contains('removebtn')) {
removeItemFromCart(event.target.parentElement);
}
}
document.body.addEventListener('click', handleDocumentClick);
With this simple method you no longer need to know how many items/buttons are in the cart or shop, they will all trigger their relevant callback.
You'll also note that in the above we are passing the event.target.parentElement to the callback meaning we can get right to work with the item without further querying in the callbacks.
The next efficiency that you might want to take advantage of, and which the snippet below relies on is data-attributes. I've added the title and price of each item to the parent div as data attributes, which allows us to access these details with out querying child elements for their content.
<div class="item" data-price="12.99" data-title="Shirt 2">
...
</div>
All that remains then, is to write the logic for adding/removing items from the cart and updating the related cart count in the header, and cart total in the cart.
The snippet here doesn't handle the changing of quantity in the cart, but perhaps you can see how you might use delegation to add on to the logic...
It's a lot to write your own cart and handle validation etc along the way, you might want to look at templating libraries or cart solutions (snipcart comes to mind).
const cartbody = document.querySelector('.cartbody');
const cartbtn = document.getElementById('cartbtn');
const closeicon = document.getElementById('closeicon');
cartbtn.addEventListener('click', function () {
cartbody.classList.toggle('cartbodyactive');
});
closeicon.addEventListener('click', function () {
cartbody.classList.remove('cartbodyactive');
});
const totalNumber = document.querySelector('.totalnumber');
const cartItemsUl = document.querySelector('.cartitems');
const cartTotal = document.querySelector('.carttotal');
function addItemToCart(item) {
console.log('add: ', item);
const { price, title } = item.dataset;
const itemLi = document.createElement('li');
itemLi.className = 'cartitem';
itemLi.dataset.title = title;
itemLi.dataset.price = price;
itemLi.innerHTML = `<span class="itemtitle">${title}</span>
<span class="itemprice">$${price}</span>
<input type="number" class="qinput" id="qinput" value="1">
<button type="button" class="removebtn">Remove</button>`;
cartItemsUl.appendChild(itemLi);
// update item count
totalNumber.textContent = +totalNumber.textContent + 1;
// update cart total
const updatedTotal = (parseFloat(cartTotal.dataset.total) + parseFloat(price)).toFixed(2);
cartTotal.dataset.total = updatedTotal;
cartTotal.textContent = `$${updatedTotal}`;
}
function removeItemFromCart(item) {
console.log('remove: ', item);
const { price, title } = item.dataset;
item.remove()
// update item count
// will need to account for the quantity input value
totalNumber.textContent = +totalNumber.textContent - 1;
// update cart total
const updatedTotal = (parseFloat(cartTotal.dataset.total) - parseFloat(price)).toFixed(2);
cartTotal.dataset.total = updatedTotal;
cartTotal.textContent = `$${updatedTotal}`;
}
function handleDocumentClick(event) {
console.clear();
if (event.target.classList.contains('atcbtn')) addItemToCart(event.target.parentElement);
if (event.target.classList.contains('removebtn')) removeItemFromCart(event.target.parentElement);
}
document.body.addEventListener('click', handleDocumentClick);
*{ padding: 0; margin: 0; box-sizing: border-box;}::-webkit-scrollbar{ display: none;}.wrapper{ overflow-x: hidden;}.topnavcont{ padding: 1em 0em; align-items: center; height: 10vh; width: 100vw; display: flex; justify-content: space-around; background-color: white; box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px; position: fixed; z-index: 5;}.topleftnav{ display: flex; justify-content: space-between; width: 10%; margin-left: -3%; font-weight: bold;}.topleftnav li{ cursor: pointer; list-style: none; font-size: 1.05rem; transition: 0.3s ease; border-bottom: transparent solid 2px;}.topleftnav li:hover{ border-bottom: black solid 2px; transform: scale(1.1);}.topnavtitle{ margin-right: 2.5%;}.navcartcontainer{ display: flex; margin-right: -1%; }.topnavcont .totalnumber{ color: black; padding: 0.2em 0.4em; border-radius: 50%; font-size: 1.25rem; height: fit-content; /* cursor: pointer; */ font-weight: bold;}.topnavcont i{ font-size: 2rem; margin-left: 0.3em; cursor: pointer; transition: 0.4s ease; }.topnavcont i:hover{ transform: scale(1.15);}.p1{ height: 100vh; position: relative;}.p1 img{ object-fit: cover; height: 100vh; width: 100%;}.p1 .overlay::after{ content: ""; position: absolute; top: 10vh; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.4; height: 90vh; width: 100%;}.cartbody{ background-color: white; position: fixed; height: 100vh; width: 25vw; top: 10%; left: 75%; z-index: 2100; overflow-y: auto; transform: translateX(100%); transition: 0.7s ease; box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;}.carttotal{ font-size: 2rem; color: rgb(22, 113, 119); font-weight: bold; margin-top: 1.5em; text-align: center; margin-bottom: 3em;}.cartbody i{ font-size: 2.2rem; margin-left: 0.4em; margin-top: 0.2em; color: black; font-weight: 200; cursor: pointer; transition: 0.3s ease;}.cartbody i:hover{ transform: scale(1.15);}.cartbody input{ width: 2.2rem; height: auto;}.cartbodyactive{ transform: translateX(0%);}.carttitle{ text-align: center; margin-top: 1em; margin-bottom: 2em;}.cartitem{ display: flex; justify-content: space-evenly;}.cartitem .itemtitle{ font-size: 1.2rem;}.cartitems{ display: flex; flex-direction: column; row-gap: 3em; overflow-y: auto; list-style: none; padding-left: 0.5em;}.removebtn{ background-color: red; color: black; font-weight: bold; outline: none; border: none; padding: 0.5em 1em; cursor: pointer;}.p2{ height: 160vh; position: relative;}.p2title{ color: black; padding-top: 2.5em; margin-left: 7%;}.p2 img{ height: 200px; width: 300px;}.itemcontainer{ margin-top: 6em; display: flex; justify-content: space-around;}.itemcontainer2{ margin-top: 6em; display: flex; justify-content: space-around;}.item{ display: flex; flex-direction: column; align-items: center; min-height: 355px; justify-content: space-around;}.atcbtn{ background-color: white; cursor: pointer; text-decoration: none; color: black; width: 40%; text-align: center; font-weight: bold; border: black solid 2px; padding: 0.8em 0.5em; transition: 0.4s ease;}.atcbtn:hover{ background-color: black; color: white; font-weight: bold;}
<!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>E-Commerce Website</title>
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<script src="app.js" async></script>
</head>
<body>
<div class="wrapper">
<div class="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">1</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<img src="https://source.unsplash.com/random/200x200/?sig=0" alt="" class="bgimg">
<div class="overlay"></div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<li class="cartitem" data-title="Shirt 2" data-price="12.99"><span class="itemtitle">Shirt 2</span>
<span class="itemprice">$12.99</span>
<input type="number" class="qinput" id="qinput" value="1">
<button type="button" class="removebtn">Remove</button>
</li>
</ul>
<div class="carttotal" data-total="12.99">Total: $12.99</div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item" data-price="8.99" data-title="Shirt 1">
<img src="https://source.unsplash.com/random/200x200/?sig=1" alt="" class="item-img">
<h1 class="item-title">Shirt 1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button type="button" class="atcbtn">Add To Cart</button>
</div>
<div class="item" data-price="12.99" data-title="Shirt 2">
<img src="https://source.unsplash.com/random/200x200/?sig=2" alt="" class="item-img">
<h1 class="item-title">Shirt 2</h1>
<h3 class="itemprice" data-price="12.99">$12.99</h3>
<!-- Add To Cart -->
<button type="button" class="atcbtn">Add To Cart</button>
</div>
<div class="item" data-price="3.99" data-title="Shirt 3">
<img src="https://source.unsplash.com/random/200x200/?sig=3" alt="" class="item-img">
<h1 class="item-title">Shirt 3</h1>
<h3 class="itemprice" data-price="3.99">$3.99</h3>
<!-- Add To Cart -->
<button type="button" class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>

The reason is that you are running removeitem() once you load the page. So, it runs through document.getElementsByClassName('removebtn') and returns the remove buttons that we have on the page when we first load it.
That's why you can remove items that were already in the cart, but you can't remove new items - those new items have remove buttons that were not iterated by the for... in loop.
You can fix that by simply adding removeitem() at the bottom of the callback function inside the eventListener from Atc, so every time you add a new item to the cart, removeitem will run again and iterate through every remove button in the page, including new ones. Hope it makes sense!
It will look like this:
function additemtocart() {
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function () {
let TotalNumbervalue = TotalNumber.innerHTML
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++
}
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
let cartrow = document.createElement('div')
let cartitems = document.getElementsByClassName('cartitems')[0]
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" id="qinput"><button class="removebtn">Remove</button></li>`
cartrow.innerHTML = cartrowcontent
cartitems.append(cartrow)
removeitem();
})
}
}
additemtocart()
EDIT
How can I do the same with the '''''for(let i = 0; i < qinput.length; i++){ qinput[i].value= 1; }''''' I added it to the bottom of the function as well but the input value is not updataing
So, when you are defining cartrowcontent inside the Atc's eventListener, you are not setting qinput class, just the id =>
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" id="qinput"><button class="removebtn">Remove</button></li>`
What I did:
involved qinput loop in a function:
function updateQInput() {
for (let i = 0; i < qinput.length; i++) {
qinput[i].value = 1;
}
}
updateQInput();
And called it at the bottom of Atc's eventListener (after adding the class "qinput"):
button.addEventListener("click", function () {
let TotalNumbervalue = TotalNumber.innerHTML
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++
}
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
let cartrow = document.createElement('div')
let cartitems = document.getElementsByClassName('cartitems')[0]
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput" id="qinput"><button class="removebtn">Remove</button></li>`
cartrow.innerHTML = cartrowcontent
cartitems.append(cartrow)
removeitem();
updateQInput();
}

Resizing Screen: Messes up sections on website

I was creating a website and am stuck because I keep resizing the screen and trying to make it mobile friendly. However, there are two sections that I cannot seem to fix. I cannot remember how I got the first three sections to stop moving while I resized the screen. I was wondering if I could get some help.
My website is shivaniahuja.com
If you look at the contact me page and the footer and try to resize them you will see the problem. Please let me know if you can help and I can attach my code if needed.
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
height: 100vh;
background-image: url(../imgs/Background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
}
img{
width: 15%;
height: 100%;
}
#first-name{
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #2f3338;
padding-left: 2%;
font-size: 2vmin;
}
nav{
width: 100%;
height: 10vh;
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li a{
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 2vmin;
color: #2f3338;
padding: 20px;
}
nav ul li a:hover{
color: #3377CC;
}
#main p{
position: absolute;
top: -1000px;
text-align: center;
color: white;
font-size: 50px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
section{
width: 100%;
text-align: center;
padding-top: 7%;
}
html{
scroll-behavior: smooth;
overflow-x: hidden;
}
section#about-me #p2{
width: 40%;
position: relative;
height: 40%;
float: right;
top: 40%;
margin-top: 3%;
right: 10%;
line-height: 200%;
font-family: 'Libre Franklin', sans-serif;
text-align: justify;
font-size: 2.2vmin;
}
section#about-me{
height: 60vh;
}
section#photography{
height: 110vh;
background-color: #F5F5F5;
}
section#experience{
height: 280vh;
background-color: #F5F5F5;
}
section#contact{
}
#contact-header{
font-size: 2.5vmin;
top: 20%;
}
section#about-me #pic{
width: 40%;
height: 40%;
position: absolute;
right: 55%;
margin-top: 2%
}
#contact-div{
position: relative;
top: 50%;
}
section#blog{
width: 100%;
padding-top: 8.5%;
}
.navs::before,
.navs::after {
display: inline-block;
content: "";
border-top: 2px solid black;
width: 5%;
margin: 0 1rem;
transform: translateY(-0.5rem);
}
h2{
position: relative;
top: -200;
}
#title{
position: absolute;
top: 50%;
font-size: 10vmin;
color: white;
left: 35%;
}
span{
position: absolute;
top: 60%;
font-size: 300%;
color: white;
left: 35%;
display: inline-block;
}
span:before{
content: 'HTML';
animation: animate infinite 8s;
position: relative;
left: 50%;
font-size: 6vmin;
}
#keyframes animate{
0%{
content: 'ENGINEER';
}
25%{
content: 'ENGINEER';
}
50%{
content: 'DEVELOPER';
}
75%{
content: 'DEVELOPER';
}
100%{
content: 'ANALYST';
}
}
.pic-and-text{
width: 18%;
height: 22%;
border-radius: 15%
}
section#experience #pic01{
left: -20%;
margin-top: 2%;
margin-bottom: 5%;
position: relative;
}
section#experience #berkeley-name{
position: relative;
font-size: 3vmin;
left: 5%;
top: 0%;
color: #3377CC;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-major{
position: relative;
font-size: 16px;
bottom: 200px;
left: 78px;
color: #5E9515;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-location{
position: relative;
font-size: 16px;
bottom: 195px;
right: 65px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-description{
position: relative;
bottom: 180px;
height: 40px;
width: 600px;
right: -610px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
font-size: 2vmin;
}
section#blog #full-blog{
position: relative;
top: -40px;
}
section#blog .blog-description{
font-size: 20px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
}
#pic001{
width: 17.5%;
}
#pic002{
width: 17.5%;
}
#pic003{
width: 17.5%;
}
.header{
font-size: 3.5vmin;
}
.blog-pics{
margin-left: .5%;
margin-top: 1%
}
section#blog #blog-description01{
margin-top: 15px;
}
#photography-paragraph{
font-size: 2.5vmin;
font-family: 'Libre Franklin', sans-serif;
margin-bottom: 2vh;
margin-top: 2vh;
}
.polaroid {
cursor:pointer;
margin:10px;
border: 1px solid #cccccc78;
background-color: #ffffff;
padding: 7%;
box-shadow: 4px 6px 4px #00000012;
text-align: center;
font-family: 'Caveat','Arial', sans-serif;
}
.polaroid .square {
background:black;
}
.polaroid .picture {
width:100%;
padding-top: 100%;
background-position: center;
background-size:cover;
opacity:0;
}
.polaroid.developed .square {
animation: flash 1.5s;
background:black;
}
.polaroid.developed .picture {
animation: fade-in 3s;
opacity:1;
}
.polaroid .labelName {
text-align: center;
font-size: 24px;
line-height:26px;
}
.polaroid-gallery {
display:-ms-grid;
display:grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 23% 23% 23% 23%;
margin-left: 5%
}
/* Adjust CSS Grid for Microsoft Edge */
.polaroid:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column:1;
}
.polaroid:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column:2;
}
.polaroid:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column:3;
}
.polaroid:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column:4;
}
.polaroid:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column:1;
}
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes flash {
2% {
background:black;
opacity: 0.5;
}
5% {
background:white;
opacity:1;
}
50% {
background:white;
opacity:.5
}
}
#footer{
background-color: #000000;
width: 100%;
padding-top: 2vh;
color: white;
padding-left: 1%;
}
#footer-paragraph{
position: relative;
top: 60%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #000;
background-color: #FFF;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #000;
border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<h1 id="title"> SHIVANI AHUJA</h1>
<span></span>
<body>
<div class ="container">
<div id="main">
<nav>
<div id= "first-name"> SHIVANI AHUJA </div>
<ul>
<li> ABOUT ME </li>
<li> EXPERIENCE</li>
<li> BLOG POSTS</li>
<li> PHOTOGRAPHY</li>
<li> CONTACT </li>
</ul>
</nav>
</div>
<section id="about-me">
<h1 class="navs" class="header"> ABOUT ME</h1>
<img src="assets/imgs/paris-2017-home.jpeg" id="pic">
<div id="p2div">
<p id="p2"> Hey! My name is Shivani and I am an undergraduate student at UC Berkeley studying Computer Science. I'm super passionate about Artificial Intelligence and Natural Language Processing. Haha, I sound like a nerd right now, but I really love what I do! I've spent tons of hours curating images and watching HTML and CSS tutorials on Youtube to finally create this masterpiece that lies in front of you. The process of creating this website was fun, yet undeniably frustrating. After creating my first website from scratch, I plan to create many more and teach others how to recreate this process!</p>
</div>
</section>
<section id="experience">
<h1 class="navs"> HERE'S WHAT I'VE DONE SO FAR</h1>
<div class= "experience-squares" id="experience-square">
<img src="assets/imgs/coming.png" class="pic-and-text" id="pic01">
<p id="berkeley-name"> Creator and iOS Developer, Summer 2020</p>
<p id="berkeley-major"> IBS Application </p>
<p id="berkeley-location"> Hayward, CA</p>
<p id="berkeley-description"> Currently,</p>
</div>
</div>
</section>
<section id="blog">
<div id=full-blog>
<h1 class="navs" class="header">BLOG</h1>
<p class="blog-description" id= "blog-description01"> I write about women in tech, hiking, and some of my personal experiences.</p>
<p class="blog-description" id= "blog-description02"> Here are three of my recent posts:</p>
<div id="pictures">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic001" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic002" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic003" class="blog-pics">
</div>
</div>
</section>
<section id="photography">
<h1 class="navs" class="header">PHOTOGRAPHY</h1>
<p id="photography-paragraph"> Creating memorabilia is an art. An art that has allowed me to capture the emotions, smiles, and happiness of every individual depcited in this gallery.</p>
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sunflower.JPG')"></div>
</div>
<div class="labelName">SunFlowers</div>
<div class="labelText">Berkeley, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/pic-with-mom.png')"></div>
</div>
<div class="labelName">Mommy's Girl</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sailboat.jpg')"></div>
</div>
<div class="labelName">Sailboat</div>
<div class="labelText">Santa Cruz, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/glasses-aesthetic.JPG')"></div>
</div>
<div class="labelName">Foolin' Around</div>
<div class="labelText">Berkeley, CA</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/flowers.jpg')"></div>
</div>
<div class="labelName">Orchid Bush</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/graduation.jpg')"></div>
</div>
<div class="labelName"> Besties 4 Life!</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/background.jpg')"></div>
</div>
<div class="labelName">Pink Sky</div>
<div class="labelText">Lake Tahoe, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/cousins.PNG')"></div>
</div>
<div class="labelName">Three Idiots</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
</section>
<div id="wrap">
<section id="contact">
<h1 class="navs" class="contact-header">CONTACT</h1>
<p id="contact-paragraph">If you have any inquiries or questions, please feel free to contact me on these social media
sites. I look forward to hearing from you! </p>
<br/>
<div align="center" class="socialbtns">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
</body>
</html>

I found one inconsistency were you wrapped up your div tag...
This often leads to buggy layouts just for not closing tags properly.
<div id="wrap">
<section id="contact">
<!-- your HTML code -->
<div align="center" class="socialbtns">
<!-- your HTML code -->
</div>
</div><!-- REMOVE THIS! did you want to finish div#wrap here ? -->
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div><!-- or did you want to finish div#wrap here ? -->

To make the whole site responsive put a <meta> tag like the one below before and after the <body> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Next, set out your HTML like this:
<div id="wrap">
<section id="contact">
<!-- Code here -->
<div align="center" class="socialbtns">
<!-- Your Code Here -->
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
And of course use the <meta> tags I mentioned

Add position relative to .polaroid-gallery
.polaroid-gallery {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 40% 40% 40% 36%;
margin-left: 5%;
position: absolute;
}
nav {
width: 100%;
/* height: 10vh; */ i remove this for the menu dont resize to much
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
section#contact {
margin-bottom: 2vh;
font-size: 2.5vmin;
border: 3px solid red; /* to test */
background: black; /* to test */
}
i recommend you check the structure of your html, and relative sizes to responsive design

JS not working to close overlay page

I'm starting with JS and I have a small problem (I think) with my code.
I'm trying to create an overlay consent page, but it seems my YES (button) is not working properly. When press YES, it should close the overlay and show website content. Can someone help me to fix it?
This is probably a small detail, as always.
function openDialog(id) {
document.getElementById(id).className += "show";
document.documentElement.style.overflow = "hidden";
}
function closeDialog(id) {
document.getElementById(id).className = "warning";
document.documentElement.style.overflow = "visible";
}
openDialog("warning");
body,
html {
overflow: hidden;
height: 100%;
margin: 0;
}
.consent-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.consentpage {
background: #000015;
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: #f8f8f8;
font-family: 'Raleway', monospace;
}
.consent-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.consent-content h1 {
text-transform: uppercase;
font-size: 4.8rem;
font-weight: 600;
letter-spacing: .1rem;
padding: 20px;
}
.consent-content p {
font-size: 2.4rem;
font-weight: 800;
text-transform: uppercase;
}
.button {
text-decoration: none;
display: inline-block;
font-size: 40px;
cursor: pointer;
padding: 0px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div id="warning" class="consent-overlay show">
<div class="consentpage">
<div class="consent-content">
<div>
<div>
<h1>AVISO</h1>
<p>Este website exibe contéudo explícito!</p>
<div class="button">
<button class="btn btn-success" onclick="closeDialog("warning")">Tenho mais de 18 anos</button>
<button class="btn btn-danger" onclick="location.href='https://www.webnode.com.br';">Tenho menos de 18 anos</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I think this is what you were looking for. I added the jQuery and boostrap <script>s to the <head> of the document. I also stripped out all the white spaces in the bootstrap <script> tag.
You don't need to add the class show as it adds itself automatically. You do however need to remove the show class and add a hide class.
Here's the code:
function openDialog()
{
document.documentElement.style.overflow = "hidden";
}
function closeDialog()
{
document.getElementById("warning").classList.remove( "show" )
document.getElementById("warning").classList.add("hide");
}
openDialog();
body,
html {
overflow: hidden;
height: 100%;
margin: 0;
}
.consent-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.consentpage {
background: #000015;
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: #f8f8f8;
font-family: 'Raleway', monospace;
}
.consent-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.consent-content h1 {
text-transform: uppercase;
font-size: 4.8rem;
font-weight: 600;
letter-spacing: .1rem;
padding: 20px;
}
.consent-content p {
font-size: 2.4rem;
font-weight: 800;
text-transform: uppercase;
}
.button {
text-decoration: none;
display: inline-block;
font-size: 40px;
cursor: pointer;
padding: 0px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="warning" class="consent-overlay show">
<div class="consentpage">
<div class="consent-content">
<div>
<div>
<h1>AVISO</h1>
<p>Este website exibe contéudo explícito!</p>
<div class="button">
<button class="btn btn-success" onclick="closeDialog()">Tenho mais de 18 anos</button>
<button class="btn btn-danger" onclick="location.href='https://www.webnode.com.br';">Tenho menos de 18 anos</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Example content -->
<div>
<div>This is some content here 1.</div>
<div>This is some content here 2.</div>
</div>
</body>
</html>

Categories