Develop Reference

I can't fix my bottom menu in any way on Chrome (while on FIrefox works perfectly)

I'm new to HTML/CSS3, so in order to strengthen the skills I've learned during an online course I'm trying to clone homepages of famous websites.
Now, I've almost completed the homepage of flickr.com but I've made a stupid mistake: I tested it only on Firefox (where it works smoothly on smartphone, tablet and desktop 1920*1080p view). Then I tried it on Chrome and...it was a disaster. My footer section was not working:
in tablet and desktop view, there's a gap between the footer and the bottom of the page I can't fix;
but although I can't fix the problem on my own, I managed to identify the problem: it's the little arrow near the word 'English' inside the footer (I need it cause when I click on it the language menu will pop up as in the original website). And I'm almost sure that this has to do with the 'position:absolute' propriety I assigned to that arrow in my style.css file (but I can't remove that property, otherwise it'll look ugly) ;
I tried working on padding and margin in any way I could think about, but I can't solve the problem and I can't tell if it's just bad styling or if the problem is connected to bad framing in my index.html file.
I don't know if someone is willing to give a look to my work. Any help will be really appreciated.
Thank you.
index.html:
<div class="header-container">
<header>
<a class="logo" href="#">
<img class="flickr" src="images/flickr-logo-2435.svg" alt="#">
<p>flickr</p>
</a>
<nav>
<div class="search-box">
<input class="search-txt" type="text" name="search" id="searchbar"
placeholder="Photos, people or groups">
<a class="search-icon" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<div class="nav-button-A">
Log In
</div>
<div class="nav-button-B">
Sign Up
</div>
</nav>
</header>
</div>
<main>
<div class="wrapper">
<h1>Find your inspiration.</h1>
<h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.</h2>
<div class="start-button">
Start for free
</div>
</div>
</main>
<footer>
<div class="footer-nav1">
<div class="footer-button">About</div>
<div class="footer-button">Jobs</div>
<div class="footer-button">Blog</div>
<div class="footer-button">Developers</div>
<div class="footer-button">Guidelines</div>
<div class="footer-button">Help</div>
<div class="footer-button">Help forum</div>
<div class="footer-button">English
<img class="arrow" src="/images/pngegg.png" alt="line down">
<div class="language-nav" style="display: none;">
<a class="language" href="#">Italiano</a>
<a class="language" href="#">French</a>
<a class="language" href="#">Espanol</a>
<a class="language" href="#">Deutsch</a>
<a class="language" href="#">日本語</a>
<a class="language" href="#">Portugues</a>
<a class="language" href="#">한국어</a>
</div>
</div>
</div>
<div class="footer-nav2">
<div class="footer-button">Privacy</div>
<div class="footer-button">Terms</div>
<div class="footer-button">Cookies</div>
<div class="footer-button">
<p>SmugMug+Flickr.</p>
<p>Connecting people through photography.</p>
</div>
<div class="social-nav">
<a class="social-button">
<i class="fa-brands fa-square-facebook"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-twitter"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</footer>
</body>
</html>
style.css:
html {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 20s ease-in-out infinite;
background-size: cover;
background-position: center center;
margin: 0;
padding: 0;
}
#keyframes animate {
0%,
100% {
background-image: url(images/0.jpg);
}
25% {
background-image: url(images/1.jpg);
}
50% {
background-image: url(images/4.jpg);
}
75% {
background-image: url(images/3.jpg);
}
}
/* GLOBAL MOBILE */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.header-container {
position: fixed;
width: 100%;
}
header {
background-color: rgba(53, 57, 57, 0.376);
height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 20px 0 15px;
}
.logo {
display: flex;
text-decoration: none;
}
.flickr {
width: 25px;
height: 25px;
align-items: center;
padding-bottom: 5px;
box-sizing: border-box;
}
.logo p {
font-size: 1.6rem;
font-weight: 700;
margin-left: 5px;
color: white;
}
.search-box {
display: flex;
justify-content: flex-end;
align-items: center;
background: #2f364000;
height: 34px;
border-radius: 3px;
padding: 0px 0px;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding: 0;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 0px;
}
.search-icon {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
width: 34px;
height: 34px;
border-radius: 0px 3px 3px 0px;
background: #2f364000;
display: flex;
justify-content: center;
align-items: center;
transition: 0.1s;
text-decoration: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 130px;
padding: 0 0 0 3px;
}
.search-box:hover>.search-icon {
font-size: 1rem;
color: #4e5052;
background: #ffffffbd;
}
nav {
display: flex;
}
a {
color: white;
text-decoration: none;
}
.nav-button-A,
.nav-button-B {
font-size: 1rem;
font-weight: 500;
}
.nav-button-A {
border: 2px solid white;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B {
/*show only in TABLET and DESKTOP mode*/
display: none;
margin-right: 15px;
border: 1.5px solid white;
background-color: white;
border-radius: 3px;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B a {
color: #000000;
}
.nav-button-B a:hover {
color: #8b8c8d;
}
main {
height: 100vh;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: block;
text-align: center;
color: white;
padding: 0 30px;
}
.wrapper h1 {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 18px;
box-sizing: border-box;
}
/*to reactivate in TABLET and DESKTOP mode*/
.wrapper h2 {
display: none;
font-size: 1.56rem;
font-weight: 500;
margin: 30px 40px 50px 40px;
line-height: 1.9rem;
box-sizing: border-box;
}
.wrapper a {
font-size: 1.45rem !important;
color: black;
font-weight: 700;
background-color: white;
padding: 17px 23px;
border-radius: 3px;
box-sizing: border-box;
}
.start-button {
margin-top: 40px;
}
.start-button a:hover {
color: #8b8c8d;
}
footer {
background-color: #000000;
color: white;
font-weight: 300;
width: 100%;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: block;
padding: 0px 10px 0px 10px;
}
.footer-nav2 {
display: block;
padding: 0px 10px 15px 10px;
}
.footer-button {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.734);
text-align: left;
padding: 20px 20px;
font-weight: 300;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-button p {
padding: 3px 0px;
text-align: center;
}
.footer-button:hover {
color: white;
font-weight: 700;
}
.language-nav {
position: absolute;
margin-top: -240px;
margin-left: -5px;
margin-bottom: 100px;
}
.language {
display: block;
margin-left: 10px;
padding: 10px 20px;
color: #000000;
background-color: white;
}
.language:first-child {
border-radius: 4px 4px 0 0;
}
.language:last-child {
border-radius: 0 0 4px 4px;
}
.language:hover {
background-color: #e6eaec;
}
.arrow {
position: absolute;
width: 15px;
padding-left: 5px;
color: white;
display: inline-block;
}
.arrow:hover>.language-nav {
display: block;
}
.social-nav {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box
}
.social-button:hover {
color: white;
font-weight: 700;
}
/* TABLET */
#media (min-width: 444px) {
.logo {
font-size: 2rem;
}
.search-box:hover>.search-txt {
width: 420px;
padding-left: 10px;
}
.nav-button-B {
display: inline-block;
padding: 7px 20px;
}
.nav-button-A {
border: none;
padding: 7px 15px 7px 5px;
}
main {
height: calc(100vh - 110px);
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
padding: 0 40px;
box-sizing: border-box;
}
.wrapper h2 {
display: block;
}
.start-button {
margin-top: 70px;
}
.wrapper a {
font-size: 1.35rem;
font-weight: 700;
background-color: white;
padding: 18px 30px;
border-radius: 3px;
}
.footer {
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0px 10px 0px 10px;
}
.footer-button {
font-size: 0.85rem;
border-bottom: none;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 15px;
}
.footer-button p {
display: inline;
}
.language-nav {
position: absolute;
display: inline;
margin-top: -265px;
margin-left: -45px;
margin-bottom: 100px;
}
}
/* DESKTOP 1920x1080p */
#media (min-width: 1080px) {
nav {
width: 95%;
}
.search-box {
justify-content: center;
width: 85%;
margin-right: auto;
margin-left: auto;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding-left: 15px;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 1400px;
}
.search-icon {
display: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 1400px;
padding-left: 15px;
}
main {
/* background-color: beige; */
height: calc(100vh - 60px);
width: 100%;
margin: 0 auto;
}
.wrapper {
padding: 0 600px;
box-sizing: border-box;
}
.wrapper h2 {
line-height: 2.1rem;
}
footer {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
flex-grow: 2;
border-bottom: none;
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-grow: 1;
align-items: center;
padding: 0 auto;
margin-left: 25px;
box-sizing: border-box;
}
.footer-nav2>.footer-button p:last-of-type {
display: none;
}
.footer-button {
padding: 5px 10px;
box-sizing: border-box;
}
.social-nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.social-button {
font-size: 1.5rem;
color: #808080;
padding: 0 auto;
box-sizing: border-box;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 37px;
box-sizing: border-box;
}
.social-nav {
text-align: center;
max-width: 300px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box;
}
}
jquery-nav.js:
$(document).ready(function(){
$('.arrow').on('click', function(){
$('.language-nav').toggle();
})
});

You were exactly right! It was that English word causing problems... well not really the English word, it was the div surrounding it.
You have to close that div, from this:
<div class="footer-button">English
To this:
<div class="footer-button">English</div>

Why does my forloop and querySelectorAll dont work with multiple div's of the same class?

Basically I'm trying to make multiple draggable div's with a script. It works fine for 1 div like this:
https://jsfiddle.net/werwer/3zvqm2sa/1/
where I have aquerySelector that gets one class name.
I wish to make multiple draggable divs, sort of like a windows computer. So used a querySelectorAll, put my eventListeners into a forloop to loop through the array, and selected the array item one by one like this:
https://jsfiddle.net/werwer/0n5eLmfv/11/
It completely removed the ability to move all the divs (including the one that originally can move). So I placed a console.log to check if my mouse up and down works for both divs. Here's the fun part: the mouseup and down check worked for the original black div (the one that supposedly can move), but could only detect mouse up for the new white div. So I'm not exactly sure what is going on.
var wrapper = document.querySelectorAll(".panel");
for (i = 0; i < wrapper.length - 1; i++) {
/* multiple event listeners for mouse up and down */
wrapper[i].addEventListener("mousedown", () => {
wrapper[i].classList.add("active");
wrapper[i].addEventListener("mousemove", onDrag);
console.log("check mouse down"); /* checking mouse down */
});
document.addEventListener("mouseup", () => {
wrapper[i].classList.remove("active");
wrapper[i].removeEventListener("mousemove", onDrag);
console.log("check mouse up"); /* checking mouse down */
});
}
/* what moves the divs */
function onDrag({ movementX, movementY }) {
let getStyle = window.getComputedStyle(wrapper);
let leftVal = parseInt(getStyle.left);
let topVal = parseInt(getStyle.top);
wrapper.style.left = `${leftVal + movementX}px`;
wrapper.style.top = `${topVal + movementY}px`;
}
.projects {
display: flex;
width: 100%;
height: 125vh;
background-image: url(images/laptop.png);
background-position: 100%;
background-position-y: center;
background-position-x: center;
background-size: 95%;
background-repeat: no-repeat;
}
.gamedev-panel {
position: absolute;
top: 3rem;
left: 16rem;
width: 40rem;
height: 30rem;
background-color: #403d39;
}
.gamedev-titlebar {
height: 3rem;
background: #EB5E28;
display: flex;
align-items: center;
justify-content: right;
}
.btn-1 {
background: turquoise;
}
.btn-2 {
background: yellow;
}
.btn-3 {
background: red;
}
.game-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-right: 1rem;
}
.gamedev-heading {
background: none;
position: absolute;
/* width: 369.43px;
height: 40.32px;
left: 408.26px;
top: 2592.77px; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #CCC5B9;
pointer-events: none;
}
.gamedev-gif {
position: absolute;
bottom: 1rem;
right: 1rem;
pointer-events: none;
}
.webdev-panel {
position: absolute;
top: 1rem;
right: 16rem;
width: 25rem;
height: 30rem;
background-color: #fffcf2;
display: inline-flex;
justify-content: flex-end;
overflow: hidden;
}
.webdev-titlebar {
/* position: absolute; */
height: 30rem;
width: 3rem;
background: #EB5E28;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
pointer-events: none;
}
.web-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-top: 1rem;
/* margin-right: 1rem; */
pointer-events: none;
}
.webdev-heading {
background: none;
/* position: absolute;
right: 5rem; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #252422;
pointer-events: none;
}
.webdev-content {
margin-right: 1rem;
pointer-events: none;
}
.webdev-img {
width: 80%;
height: 80%;
position: absolute;
right: 4rem;
top: 5rem;
pointer-events: none;
<div class="projects">
<div class="gamedev-panel panel">
<div class="gamedev-titlebar">
<div class="btn-1 game-btn"></div>
<div class="btn-2 game-btn"></div>
<div class="btn-3 game-btn"></div>
</div>
<h2 class="gamedev-heading">I DEVELOP GAMES</h2>
<img src="images/game.gif" alt="" class="gamedev-gif">
</div>
<div class="webdev-panel panel">
<div class="webdev-content">
<h2 class="webdev-heading">I MAKE WEBSITES</h2>
<img src="images/web.png" alt="" class="webdev-img">
</div>
<div class="webdev-titlebar">
<div class="btn-1 web-btn"></div>
<div class="btn-2 web-btn"></div>
<div class="btn-3 web-btn"></div>
</div>
</div>
<div class="others-panel"></div>
</div>

your code needs some changes.
don't use variable i in a function inside a loop. variables are all refrence.
don't use arrow function to access this pointer of current element
change your wrapper[i] in onDrag to this like above
add user-select:none inside the .panel to be not selectable in css
add mouse out event to current element for the time the mouse jumped out of the screen and the mouseup doesn't fire
var wrapper = document.querySelectorAll(".panel");
for (i = 0; i < wrapper.length; i++) {
wrapper[i].addEventListener("mousedown",function () {
this.classList.add("active");
this.addEventListener("mousemove", onDrag);
});
wrapper[i].addEventListener("mouseup",function () {
this.classList.remove("active");
this.removeEventListener("mousemove", onDrag);
});
wrapper[i].addEventListener("mouseout",function () {
this.removeEventListener("mousemove", onDrag);
});
}
function onDrag({
movementX,
movementY
}) {
let getStyle = window.getComputedStyle(this);
let leftVal = parseInt(getStyle.left);
let topVal = parseInt(getStyle.top);
this.style.left = `${leftVal + movementX}px`;
this.style.top = `${topVal + movementY}px`;
}
.panel {
user-select: none;
}
.projects {
display: flex;
width: 100%;
height: 125vh;
background-image: url(images/laptop.png);
background-position: 100%;
background-position-y: center;
background-position-x: center;
background-size: 95%;
background-repeat: no-repeat;
}
.gamedev-panel {
position: absolute;
top: 3rem;
left: 16rem;
width: 40rem;
height: 30rem;
background-color: #403d39;
}
.gamedev-titlebar {
height: 3rem;
background: #EB5E28;
display: flex;
align-items: center;
justify-content: right;
}
.btn-1 {
background: turquoise;
}
.btn-2 {
background: yellow;
}
.btn-3 {
background: red;
}
.game-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-right: 1rem;
}
.gamedev-heading {
background: none;
position: absolute;
/* width: 369.43px;
height: 40.32px;
left: 408.26px;
top: 2592.77px; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #CCC5B9;
pointer-events: none;
}
.gamedev-gif {
position: absolute;
bottom: 1rem;
right: 1rem;
pointer-events: none;
}
.webdev-panel {
position: absolute;
top: 1rem;
right: 16rem;
width: 25rem;
height: 30rem;
background-color: #fffcf2;
display: inline-flex;
justify-content: flex-end;
overflow: hidden;
}
.webdev-titlebar {
/* position: absolute; */
height: 30rem;
width: 3rem;
background: #EB5E28;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
pointer-events: none;
}
.web-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-top: 1rem;
/* margin-right: 1rem; */
pointer-events: none;
}
.webdev-heading {
background: none;
/* position: absolute;
right: 5rem; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #252422;
pointer-events: none;
}
.webdev-content {
margin-right: 1rem;
pointer-events: none;
}
.webdev-img {
width: 80%;
height: 80%;
position: absolute;
right: 4rem;
top: 5rem;
pointer-events: none;
}
<div class="projects">
<div class="gamedev-panel panel">
<div class="gamedev-titlebar">
<div class="btn-1 game-btn"></div>
<div class="btn-2 game-btn"></div>
<div class="btn-3 game-btn"></div>
</div>
<h2 class="gamedev-heading">I DEVELOP GAMES</h2>
<img src="images/game.gif" alt="" class="gamedev-gif">
</div>
<div class="webdev-panel panel">
<div class="webdev-content">
<h2 class="webdev-heading">I MAKE WEBSITES</h2>
<img src="images/web.png" alt="" class="webdev-img">
</div>
<div class="webdev-titlebar">
<div class="btn-1 web-btn"></div>
<div class="btn-2 web-btn"></div>
<div class="btn-3 web-btn"></div>
</div>
</div>
<div class="others-panel"></div>
</div>

The upper bound of wrapper.length - 1 excludes the last .panel.
Additionally, there are various issues with variable bindings:
wrapper in onDrag is a NodeList, not an HTMLElement. onDrag must operate on a specific element of wrapper, rather than the whole collection.
since i isn't block-local and is updated in the loop, it will be the last value i takes (one past the loop end condition); wrapper[i] in the mouse event handlers will only ever refer to one thing. Declaring i with let will make it block-local, and wrapper[i] within the event handlers will then refer to the correct element.
Note that both the above binding issues are already covered by other questions on SO.

Please delegate
Here is an untested version since I am not on a proper device, but it gives the structure
In the onDrag we just test the active element if there is none, we could leave, but as I said, I cannot actually test this to conclusion
I use the same eventlistener for mouseup and down and then instead of add or remove I toggle active depending on the event. If mousedown, add active if up remove active (that is what toggle does)
I add the event listeners to the OUTER div, that wraps ALL the panels, and in the event handler, the e.target is (possibly inside) the panel. So to get the panel itself, I use.closest to make sure we are acting on the wrapper
const wrapper = document.querySelector(".projects");
/* what moves the divs */
const onDrag = ({ movementX, movementY }) => {
const wrapperPanel = wrapper.querySelector(".panel.active")
let getStyle = window.getComputedStyle(wrapperPanel);
let leftVal = parseInt(getStyle.left);
let topVal = parseInt(getStyle.top);
wrapperPanel.style.left = `${leftVal + movementX}px`;
wrapperPanel.style.top = `${topVal + movementY}px`;
}
const mouse = (e) => {
const tgt = e.target.closest(".panel");
if (tgt) tgt.classList.toggle("active",e.type=="mousedown");
};
wrapper.addEventListener("mousedown", mouse)
wrapper.addEventListener("mouseup", mouse)
wrapper.addEventListener("mousemove", onDrag);
.projects {
display: flex;
width: 100%;
height: 125vh;
background-image: url(images/laptop.png);
background-position: 100%;
background-position-y: center;
background-position-x: center;
background-size: 95%;
background-repeat: no-repeat;
}
.gamedev-panel {
position: absolute;
top: 3rem;
left: 16rem;
width: 40rem;
height: 30rem;
background-color: #403d39;
}
.gamedev-titlebar {
height: 3rem;
background: #EB5E28;
display: flex;
align-items: center;
justify-content: right;
}
.btn-1 {
background: turquoise;
}
.btn-2 {
background: yellow;
}
.btn-3 {
background: red;
}
.game-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-right: 1rem;
}
.gamedev-heading {
background: none;
position: absolute;
/* width: 369.43px;
height: 40.32px;
left: 408.26px;
top: 2592.77px; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #CCC5B9;
pointer-events: none;
}
.gamedev-gif {
position: absolute;
bottom: 1rem;
right: 1rem;
pointer-events: none;
}
.webdev-panel {
position: absolute;
top: 1rem;
right: 16rem;
width: 25rem;
height: 30rem;
background-color: #fffcf2;
display: inline-flex;
justify-content: flex-end;
overflow: hidden;
}
.webdev-titlebar {
/* position: absolute; */
height: 30rem;
width: 3rem;
background: #EB5E28;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
pointer-events: none;
}
.web-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-top: 1rem;
/* margin-right: 1rem; */
pointer-events: none;
}
.webdev-heading {
background: none;
/* position: absolute;
right: 5rem; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #252422;
pointer-events: none;
}
.webdev-content {
margin-right: 1rem;
pointer-events: none;
}
.webdev-img {
width: 80%;
height: 80%;
position: absolute;
right: 4rem;
top: 5rem;
pointer-events: none;
<div class="projects">
<div class="gamedev-panel panel">
<div class="gamedev-titlebar">
<div class="btn-1 game-btn"></div>
<div class="btn-2 game-btn"></div>
<div class="btn-3 game-btn"></div>
</div>
<h2 class="gamedev-heading">I DEVELOP GAMES</h2>
<img src="images/game.gif" alt="" class="gamedev-gif">
</div>
<div class="webdev-panel panel">
<div class="webdev-content">
<h2 class="webdev-heading">I MAKE WEBSITES</h2>
<img src="images/web.png" alt="" class="webdev-img">
</div>
<div class="webdev-titlebar">
<div class="btn-1 web-btn"></div>
<div class="btn-2 web-btn"></div>
<div class="btn-3 web-btn"></div>
</div>
</div>
<div class="others-panel"></div>
</div>

You're adding several mouseup event listeners to your document,you're iterating up to 2 indexes below the final length of your element array, and you're never declaring your i variable.
In your event mousemove listener, you're using the wrapper variable that you haven't redeclared from your previous code. You can use the target property from the event object to get the element calling your listener.
var wrapper = document.querySelectorAll(".panel");
for (let i = 0; i < wrapper.length; i++) {
/* multiple event listeners for mouse up and down */
wrapper[i].addEventListener("mousedown", () => {
wrapper[i].classList.add("active");
wrapper[i].addEventListener("mousemove", onDrag);
console.log("check mouse down"); /* checking mouse down */
});
function mouseMove() {
wrapper[i].classList.remove("active");
wrapper[i].removeEventListener("mousemove", mouseMove);
wrapper[i].removeEventListener("mousemove", onDrag);
console.log("check mouse up"); /* checking mouse down */
};
wrapper[i].addEventListener("mouseup", mouseMove);
}
/* what moves the divs */
function onDrag(event) {
let getStyle = window.getComputedStyle(event.target);
let leftVal = parseInt(getStyle.left);
let topVal = parseInt(getStyle.top);
event.target.style.left = `${leftVal + event.movementX}px`;
event.target.style.top = `${topVal + event.movementY}px`;
}
.projects {
display: flex;
width: 100%;
height: 125vh;
background-image: url(images/laptop.png);
background-position: 100%;
background-position-y: center;
background-position-x: center;
background-size: 95%;
background-repeat: no-repeat;
}
.gamedev-panel {
position: absolute;
top: 3rem;
left: 16rem;
width: 40rem;
height: 30rem;
background-color: #403d39;
}
.gamedev-titlebar {
height: 3rem;
background: #EB5E28;
display: flex;
align-items: center;
justify-content: right;
}
.btn-1 {
background: turquoise;
}
.btn-2 {
background: yellow;
}
.btn-3 {
background: red;
}
.game-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-right: 1rem;
}
.gamedev-heading {
background: none;
position: absolute;
/* width: 369.43px;
height: 40.32px;
left: 408.26px;
top: 2592.77px; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #CCC5B9;
pointer-events: none;
}
.gamedev-gif {
position: absolute;
bottom: 1rem;
right: 1rem;
pointer-events: none;
}
.webdev-panel {
position: absolute;
top: 1rem;
right: 16rem;
width: 25rem;
height: 30rem;
background-color: #fffcf2;
display: inline-flex;
justify-content: flex-end;
overflow: hidden;
}
.webdev-titlebar {
/* position: absolute; */
height: 30rem;
width: 3rem;
background: #EB5E28;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
pointer-events: none;
}
.web-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-top: 1rem;
/* margin-right: 1rem; */
pointer-events: none;
}
.webdev-heading {
background: none;
/* position: absolute;
right: 5rem; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #252422;
pointer-events: none;
}
.webdev-content {
margin-right: 1rem;
pointer-events: none;
}
.webdev-img {
width: 80%;
height: 80%;
position: absolute;
right: 4rem;
top: 5rem;
pointer-events: none;
<div class="projects">
<div class="gamedev-panel panel">
<div class="gamedev-titlebar">
<div class="btn-1 game-btn"></div>
<div class="btn-2 game-btn"></div>
<div class="btn-3 game-btn"></div>
</div>
<h2 class="gamedev-heading">I DEVELOP GAMES</h2>
<img src="images/game.gif" alt="" class="gamedev-gif">
</div>
<div class="webdev-panel panel">
<div class="webdev-content">
<h2 class="webdev-heading">I MAKE WEBSITES</h2>
<img src="images/web.png" alt="" class="webdev-img">
</div>
<div class="webdev-titlebar">
<div class="btn-1 web-btn"></div>
<div class="btn-2 web-btn"></div>
<div class="btn-3 web-btn"></div>
</div>
</div>
<div class="others-panel"></div>
</div>

Visually replace div when clicking outside

function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="flex";
}
#import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Bebas+Neue&family=Inter:wght#100;200;300;400;600;700;800&family=Roboto:wght#300;400;700&family=VT323&display=swap');
body {
margin: 0;
padding: 0;
}
.all_guidebook {
width: 100%;
position: absolute;
min-height: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.title_guidebook {
position: relative;
top: 50px;
justify-content: center;
}
.disposition_guidebook {
width: 1100px;
display: flex;
position: relative;
align-items: flex-start;
top: 55px;
}
.navigation {
width: 286px;
background: var(--bleu);
position: relative;
height: auto;
padding-bottom: 30px;
border-radius: 35px;
margin-right: 15px;
}
.navigation .all_links {
position: relative;
top: 15px;
}
.navigation h1 {
color: white;
font: 45px 'Bebas Neue';
margin: 0;
text-align: center;
position: relative;
top: 15px;
}
.navigation h2 {
color: white;
font: 34px 'Bebas Neue';
position: relative;
background: var(--fushia);
display: flex;
border-radius: 15px;
height: 45px;
padding-top: 2px;
margin-bottom: 26px !important;
width: 247px;
box-sizing: border-box;
top: 20px;
margin: auto;
justify-content: center;
}
.navigation .menu_deroul, #regl {
display: flex;
background: blue;
width: 300px;
}
#reglhover {
display: flex;
background: blue;
width: 300px;
}
#reglhover img, #staffcredshover img, #ctxhover img, #grphover img, #pvrhover img, #syst1hover img, #syst2hover img, #pihover img, #exphover img, #foirehover img {
transform: rotate(135deg);
top: 5px;
position: relative;
left: 7px;
}
.navigation .menu_deroul img {
float: left;
left: 7px;
position: relative;
cursor: pointer;
}
.navigation span {
color: var(--fushiapp);
margin-right: 3px;
font: 20px 'Bebas Neue';
}
.navigation h3 {
color: var(--white);
font: 20px 'Bebas Neue';
}
.wrap_deroul {
display: flex;
flex-direction: column;
position: relative;
top: -18px;
align-items: flex-end;
}
.ancres_deroul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 30px;
padding: 0;
color: white;
top: -16px;
font-weight: 200!important;
right: 16px;
font: 16px 'Bebas Neue';
position: relative;
}
.ancres_deroul ul {
margin: 0;
display: flex;
cursor: pointer;
list-style: none;
align-items: flex-end;
flex-direction: column;
}
.ancres_deroul li {transition: .5s;}
.ancres_deroul li a {
text-decoration: none!important;
color: black;
}
.ancres_deroul li:hover {
letter-spacing: .5px;
transition: .5s;
}
<div class="menu_deroul" id="regl" style="display:flex" >
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" onclick="replace('regl','reglhover')" />
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')" id="defaultOpen">Règlement</h3>
</div>
</div>
<div id="reglhover" style="display:none">
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" style="cursor:pointer; transform: rotate(135deg); transition: .5s; transition-duration: 2s;" onclick="replace('reglhover','regl')" />
<div class="wrap_deroul">
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')">Règlement</h3>
</div>
<div class="ancres_deroul">
<ul>
<li><a onclick="scrollWin()">Inscription & RP</a></li>
<li style="margin-top: -5px;">Discord</li>
</ul>
</div>
</div>
</div>
I have this code, it replaces a div by another when clicking on a button.
I want it to close the showed div when clicking outside the div. For example, if the div "reglhover" is showed, I want it to be replaced by the "hide" status (replaced by "regl") when clicking outside the "reglhover" div. And i want it to work for every occurrence (because i use tabs)... But I can't figure out how to do it. Can someone help me? :(

try
const regl = document.getElementById("regl")
const reglhover = document.getElementById("reglhover")
document.addEventListener("click", (e) => {
if (reglhover.style.display === "flex" && e.target.id != "reglhover") {
reglhover.style.display = "none"
regl.style.display = "flex"
}
})

How can I get a styled form to be submitted?

So I'm trying to submit an HTML forms but I can't get it to work. I've tried removing some styling to different divs, and also I've tried removing javascirpt files but nothing seems to be the problem. I already checked about 10 posts here on Stackoverflow but none of them could help me. I would really appreciate if someone could help me.
//Nearby Search Overlay
var state_overlay1 = true;
function nearby_search_toggle() {
if (state_overlay1) {
state_overlay1 = false;
document.getElementById("nearby_search").style.height = "100%";
} else {
state_overlay1 = true;
document.getElementById("nearby_search").style.height = "0%";
}
}
//Search Nearby Query
var nearby_query = "¿a dónde quieres ir?";
function update_query(choice) {
document.getElementById("nearby_query_text").innerHTML = choice;
document.getElementById("adqi_button").style.backgroundColor = "#A288E3";
nearby_search_toggle();
}
//Add Address Overlay
var state_overlay2 = true;
function add_address_toggle() {
if (state_overlay2) {
state_overlay2 = false;
document.getElementById("adqi_button").style.zIndex = "0";
document.getElementById("add_address").style.height = "100%";
} else {
state_overlay2 = true;
document.getElementById("adqi_button").style.zIndex = "2";
document.getElementById("add_address").style.height = "0%";
}
}
function add_address(){
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_R.ttf';
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RB.ttf';
font-weight: bold;
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RI.ttf';
font-style: italic;
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
padding-top: 0px;
cursor: pointer;
outline:none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
z-index: 2;
position: relative;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
#nearby_search {
transition: 0.4s;
position: fixed;
width: 100%;
height: 0%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
overflow-y: scroll;
transition: 0.4s;
backdrop-filter: blur(6px);
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#nearby_search::-webkit-scrollbar {
display: none;
}
.adqi_dropdown {
margin-top: 134px;
margin-left: 25rem;
display: flex;
flex-shrink: 0;
flex-direction: column;
}
#add_address {
transition: 0.4s;
position: fixed;
width: 100%;
height: 0%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
overflow-y: scroll;
transition: 0.4s;
backdrop-filter: blur(6px);
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#add_address::-webkit-scrollbar {
display: none;
}
.square_popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 500px;
display: flex;
flex-shrink: 0;
flex-direction: column;
background-color: #1D263B;
font-family: biolinum;
font-size: 1.33rem;
color: #FCF7F8;
justify-content: space-evenly;
border-radius: 50px;
}
#cancelar_button {
height: 50px;
width: 25%;
border-radius: 50px;
font-family: biolinum;
font-size: 1.33rem;
color: #FCF7F8;
background-color: #F7B32B;
border: none;
border-radius: 50px;
cursor: pointer;
outline:none;
}
#submit_button {
height: 50px;
width: 55%;
border-radius: 50px;
font-family: biolinum;
font-size: 1.33rem;
color: #FCF7F8;
background-color: #7CD97C;
border: none;
border-radius: 50px;
cursor: pointer;
outline:none;
}
.common_flexbox {
display: flex;
flex-shrink: 0;
justify-content: space-around;
}
#nickname {
position: relative;
margin-left: auto;
margin-right: auto;
border-radius: 50px;
width: 90%;
height: 50px;
font-family: biolinum;
font-size: 1.33rem;
border: none;
background-color: #FCF7F8;
color: #1D263B;
text-align: center;
transition: 0.4s;
}
#nickname:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button class="domainhome"><p>salgamos.com.mx</p></button>
<div class="flex-container">
<div class="left-bar">
<div>
<button onClick="nearby_search_toggle()" class="adondequieresir" id="adqi_button"><p id="nearby_query_text">¿a dónde quieres ir?</p></button>
</div>
<div id="nearby_search">
<div class="adqi_dropdown">
<button class="adondequieresir" onClick="update_query('restaurante')"><p>restaurante</p></button>
<button class="adondequieresir" onClick="update_query('café')"><p>café</p></button>
<button class="adondequieresir" onClick="update_query('bar')"><p>bar</p></button>
<button class="adondequieresir" onClick="update_query('parque')"><p>parque</p></button>
<button class="adondequieresir" onClick="update_query('antro')"><p>antro</p></button>
</div>
</div>
<div>
<button class="agregarubicacion" onClick="add_address_toggle()" id="au_button">
<img class="icons" src="{{url_for('static', filename='icons/noun_pin_button.svg')}}" width="30px" height="30px"/>
<p style="float: left;">¡agrega tu ubicación!</p>
</button>
</div>
<div id="add_address">
<form action="#" onsubmit="add_address();return false" name="get_nickname" method="POST">
<div class="square_popup">
<input type="text" name="nickname" placeholder="¿cuál es tu apodo?" id="nickname" />
<div class="common_flexbox">
<button onClick="add_address_toggle()" id="cancelar_button"><p>Cancelar</p></button>
<button type="submit" id="submit_button" value="Submit"><p>Agregar ubicación</p></button>
</div>
</div>
</form>
</div>
<div>
<button class="personasunidas">
<img class="icons" src="{{url_for('static', filename='icons/noun_user.svg')}}" width="30px" height="30px"/>
<p style="float: left;">(n) personas unidas</p>
</button>
</div>
</div>
</div>
</body>
</html>

When to click form input the background is changing weirdly and after clicking page is not loading correctly on the phone

When I click the input the page is going crazy on the phone. There is not problem on the desktop. I believe the problem is because of the CSS but couldn't figure it out. I am a beginner designer and I am working on responsive web designers. When I click the input the background changes and page is not loading correctly.
This is the HTML of the site
body {
font-family: 'Playfair Display', serif;
position: relative;
background-image: url("pop-zebra-4q3Ogm3Kt44-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
body::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.8)
}
#all {
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
padding: 3rem;
z-index: 1;
color: #fff;
}
.showcase-top {
text-align: center;
margin-right: 2rem;
}
.showcase-top h1 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.8rem;
}
.showcase-top p {
font-size: 1.1rem;
letter-spacing: 5px
}
#second {
margin-top: 0.2rem
}
.tabs {
display: flex;
text-align: center;
padding: 2rem;
}
.tab {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid rgba(166, 151, 7, 0.8);
border-radius: 50%;
margin-right: 2rem;
}
.tabs .tab h1 {
margin-top: 0.9rem;
}
.form {
padding: 0.5rem 5rem;
text-align: center;
margin-right: 2.5rem;
width: 90%;
max-width: 900px;
padding: 10px 50px;
margin-left: 0.6rem;
}
.form input {
width: 70%;
padding: 0.8rem;
border: none;
border-radius: 1.5rem;
margin-right: 0.5rem;
outline: none;
}
.form button {
width: 25%;
padding: 0.8rem;
border-radius: 1.5rem;
border: none;
background-color: #a69802;
color: #edece1;
cursor: pointer;
outline: none;
}
.footer {
color: rgba(255, 255, 255, 0.6);
width: 100%;
font-size: 6px;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-10%, 51%);
letter-spacing: 1px
}
#media screen and (max-width:768px) {
.tabs {
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
margin-left: 0.6rem;
}
.tab {
margin-bottom: 1rem;
height: 90px;
width: 90px;
}
.form {
display: inline-block;
margin-right: 1rem;
margin-left: 1rem;
margin-top: -3rem;
width: 100%;
}
.form button {
width: 100px;
}
.showcase-top {
width: 500px;
margin-left: 1rem;
}
.showcase-top h1 {
font-size: 2rem;
}
.showcase-top p {
font-size: 1rem;
letter-spacing: 3px;
}
}
#media screen and (min-width:320px) and (max-width:480px) {
.form {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
.form input {
width: 65%;
}
.form button {
width: 40%;
margin-top: 1rem;
}
.showcase-top p {
font-size: 0.7rem
}
.tabs {
padding: 0;
padding-top: 1.2rem
}
.tab {
height: 90px;
width: 90px;
}
.footer {
bottom: 15%;
left: 23%
}
}
<body>
<showcase id="all">
<div class="showcase-top">
<h1>Coming Soon</h1>
<p>My website is under construction</p>
<p id="second">Follow us now!</p>
</div>
<section class="tabs">
<div class="tab">
<h1 id="day">na</h1>
<p>Days</p>
</div>
<div class="tab">
<h1 id="hour">na</h1>
<p>Hours</p>
</div>
<div class="tab">
<h1 id="min">na</h1>
<p>Minutes</p>
</div>
<div class="tab">
<h1 id="sec">na</h1>
<p>Seconds</p>
</div>
</section>
<form class="form">
<input type="email" placeholder="Enter Email...">
<button type="submit">Subscribe</button>
</form>
</showcase>
<footer class="footer">
<h1>Designed by Cag | Copyright © 2021</h1>
</footer>