Website on phone is not the same on laptop mobile view - javascript

The website mobile version looks like this:desktop mobile view
But on my phone it looks like this: phone view
I make use of box-sizing, still don’t know why it’s having different scaling


Check what measurement unit you used. If it is Percent (%) or something else you should convert it to pixels, as Percent and other similar units are dependent on the screen size. If this is not the issue, please include the code for it so we can find the issue. Thanks!


If you set the width of the image in terms of the viewport size then you get a circle (at least on the tests I did on IOS).
Obviously you will want to set the vw amount to suit your particular requirement.
This snippet sets it to 10vw for this demo.
However, there is another factor. I think you are relying on the natural dimensions of the images to be square. If they aren't then things could look distorted so this snippet adds an object-fit: cover.This still relies on the faces being in a more or less central position in the overall image - but that would need correction depending on each individual image.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
#media screen and (max-width:992px) {
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="kill">
<nav class="navbar navbar-expand-sm navbar-dark nipp navi">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="bi bi-whatsapp h2"></i> Whatsapp
</a>
<div class="rell">
<button class="rate text-light h2"> <i class="bi bi-search"></i></button>
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="rounded-circle w-25">
</div>
</div>
</nav>
<section>
<div class="container pt-4">
<div class="mage1">
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="rounded-circle mage ms-3 " alt="">
<h6 class="mt-2 txt">You</h6>
<button class="butn"> <i class="bi bi-plus-circle-fill"></i></button>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/6.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/18.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/14.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Incidentally, I'm not sure why you bother to repeat the styling und er the media query, for example for mage, but that doesn't affect your question so I've left it.

Related

How to change image position

I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching.
I used undraw to add an image but unfortunately, the image is stuck to the right:
I want to put the image underneath my icons but not sure on how to do to this. Any advice on how to get the SVG image in the centre underneath my icons?
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
*{
color:black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,span{
color:black;
text-align: center;
line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
line-height: 1.5;
font-size: 16px;
}
li{
list-style-type: none;
}
.flex{
display: flex; /* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1{
flex: 1; /* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink{
color: #FF69B4 ;
}
nav{
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list{
display: flex;
}
.nav__link--anchor{
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary{
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover{
background-color: #FF69B4;
}
.personal_logo{
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me{
min-height: 100vh; /* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info{
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column; /* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask{
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0,0,0,1);
margin-bottom: 20px;
}
.about-me__picture{
width: 100%;
transform: scale(1,1.1);
padding-top: 7px;
}
.about-me__info--para{
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title{
margin-bottom: 15px;
}
.about-me__link{
font-size: 20px;
color:#FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container{
flex: 1;
display: flex;
align-items: center;
}
<!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>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black"
>Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class=
"nav__link--anchor
nav__link--anchor-primary"
>Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row"> <!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
</figure> <!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links"></div>
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
<figure class="about-me__img--container">
<img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
</figure>
</div>
</section>
</body>
</html>

Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
* {
color: black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
color: black;
text-align: center;
line-height: 1.25;
}
h1 {
font-size: 36px;
}
p {
line-height: 1.5;
font-size: 16px;
}
li {
list-style-type: none;
}
.flex {
display: flex;
/* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1 {
flex: 1;
/* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink {
color: #FF69B4;
}
nav {
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list {
display: flex;
}
.nav__link--anchor {
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary {
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover {
background-color: #FF69B4;
}
.personal_logo {
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me {
min-height: 100vh;
/* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info {
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column;
/* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask {
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
.about-me__picture {
width: 100%;
transform: scale(1, 1.1);
padding-top: 7px;
}
.about-me__info--para {
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title {
margin-bottom: 15px;
}
.about-me__link {
font-size: 20px;
color: #FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
}
<!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>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class="nav__link--anchor
nav__link--anchor-primary">Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row">
<!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
</figure>
<!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links">
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<figure class="about-me__img--container" >
<img src="https://picsum.photos/200" alt="" style="margin: auto">
</figure>
</div>
</section>
</body>
</html>

Wrapping text (numbers) to expand a div

I am currently learning HTML, CSS and JS, for my first project I am working on making a basic calculator using these languages and so far I have almost completed the UI of the calculator. It looks like this so far:
Image of calculator display (sorry I still cant posts pictures directly with questions)
My question is: that say the user inputs a large number, I want the display to expand and have the number split across 2 lines, but no matter what I have tried I can't seem to get it working. (I have tried: word-wrap: breakword, word-break: break-all, overflow-wrap: break-word etc.)
What the display looks like when a large number is hardcoded to appear
How I want large numbers to appear on the display (a screenshot from someone else's calculator)
Can anyone help me figure this out.
My code:
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
/* white-space: normal; */
font-family: "calcFont", Helvetica;
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>
I haven't actually added any JS yet because I'm just trying to make sure the UI is good first then I'll move on to it.
Any help would be much appreciated. Thanks!

You can try word-break: break-all; this break the numbers into a separate when overflowed
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
/* white-space: normal; */
font-family: "calcFont", Helvetica;
font-size: 40px;
word-break: break-all;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can use word-wrap: anywhere; to achieve this effect.
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
font-family: "calcFont", Helvetica;
font-size: 40px;
word-wrap: anywhere;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>

My JavaScript won't work before i resize my browser window, and almost all my CSS is working, except for a few lines (idk what's the problem here)

I am trying to make the second page of my Website, but some of the CSS and JS seem to not work.
I have 4 files, and 4 folders (all located in 1 same folder). The first folder is view, which contains index.html (the main page of the website), and links.html (the file that isn't working). Then there is the js folder which contains script.js. The third folder is css and inside of it is style.css. The final folder is asset which has image assets for my Website.
Here is the content of index.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>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Linkeld</h1>
<h2>With over 1.000.000 links worldwide</h2>
<div id="signup">
Sign-Up Now!
</div>
</div>
</div>
<div id="main">
<div id="aboutWebsite">
<div class="wrapper">
<div class="card">
<h1><i class="fas fa-share-alt"></i> Share</h1>
<p>Share links to people across the globe to discover, the limitation is only your imagination</p>
<div class="image" id="image1">
<img src="../asset/brooke-cagle-g1Kr4Ozfoac-unsplash-removebg-preview.png" alt="image1">
</div>
</div>
<div class="card">
<h1><i class="fas fa-search"></i> Discover</h1>
<p>Discover new websites from other people via links, you can visit all of the internet's website!
</p>
<div class="image" id="image2">
<img src="../asset/grzegorz-walczak-yoIIPcrWhjI-unsplash-removebg-preview.png" alt="image2">
</div>
</div>
<div class="card">
<h1><i class="fas fa-times-circle"></i> No Restrictions</h1>
<p>No restricted links or banned sites, share whatever you like</p>
<div class="image" id="image3">
<img src="../asset/cdd20-vR6bNYTVlpo-unsplash-removebg-preview.png" alt="image3">
</div>
</div>
</div>
</div>
<div id="whySignup">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Why Sign-Up?</h1>
<p>Firstly, you'll be able to share links with others! Not just click them.</p>
<p>Secondly, you can like and save links to your account, so you can view at them later.</p>
<p>Thirdly, you'll be able to customize your Username! No more plain old nicknames.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="phishing">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Would i fall to phishing?</h1>
<p>Well technically, yes, you will at some point fall into a phishing scam.</p>
<p>But, you can check the domain first, before clicking the link.</p>
<p>Check for any typos, or weird characters. A site that has a suspicious looking domain may be a
phishing website so be careful.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="nfsw">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Can I post NFSW related stuff?</h1>
<p>There is no limitation to what website you want to share here.</p>
<p>So yes you absolutely can post NFSW related content here and not get banned.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="signupCall">
<div class="wrapper">
<div class="section">
<h1>What are you waiting for?</h1>
</div>
<div class="section">
<div>
<a class="button" href="">Sign-Up Now!</a>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
And here is links.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>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Links</h1>
<h2 style="margin-bottom: 100px;">This is where you'll find links to Websites!</h2>
</div>
</div>
<div id="main">
<div id="linksList">
<div class="wrapper">
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
Now for the CSS (style.css) :
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
:root {
/* CSS HEX */
--lime-green: #1ec90eff;
--metallic-sunburst: #9b7e46ff;
--mellow-apricot: #f4b266ff;
--dark-liver-horses: #544343ff;
}
html {
scroll-behavior: smooth;
}
a {
color: var(--lime-green);
text-decoration: none;
transition: text-decoration 0.3s ease-in-out;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: var(--lime-green);
}
#topnav {
position: fixed;
width: 100%;
z-index: 99;
background: white;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
transition: all 0.2s ease-in-out;
}
#topnav.transparent {
background: transparent;
box-shadow: none;
}
#topnav .wrapper.main {
display: flex;
justify-content: stretch;
}
#topnav .wrapper {
display: flex;
}
#topnav .wrapper#navLogo {
width: 70%;
}
#topnav .wrapper#navLogo img {
padding: 10px;
width: 60px;
margin-left: 40px;
}
#topnav .wrapper#navLinks {
flex: 1;
justify-content: space-evenly;
}
#topnav.transparent .wrapper#navLinks a {
padding: 20px;
text-decoration: none;
color: white;
text-align: center;
transition: all 0.2s ease-in-out;
}
#topnav .wrapper#navLinks a {
color: black;
padding: 20px;
text-decoration: none;
text-align: center;
transition: all 0.2s ease-in-out;
}
#head {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
margin-bottom: 30px;
}
#head .wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#head .wrapper h1,
#head .wrapper h2 {
color: white;
}
#head .wrapper img {
width: 40px;
margin: 100px 0 20px 0;
}
#head .wrapper h1 {
font-size: 90px;
}
#head .wrapper h2 {
font-size: 18px;
}
#head #signup {
margin: 80px 0 100px 0;
}
#head #signup a {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
#head #signup a:hover {
text-decoration: none;
transform: scale(1.1);
}
#aboutWebsite .wrapper {
display: flex;
flex-direction: row;
justify-content: center;
}
#aboutWebsite .wrapper .card {
width: 400px;
margin: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
padding: 80px 60px;
}
#aboutWebsite .wrapper .card h1 {
font-size: 40px;
margin-bottom: 20px;
font-weight: 300;
}
#aboutWebsite .wrapper .card p {
font-size: 18px;
}
#aboutWebsite .wrapper .card .image {
display: flex;
justify-content: center;
}
#aboutWebsite .wrapper .card .image img {
width: 300px;
}
#aboutWebsite .wrapper .card .image#image1,
#aboutWebsite .wrapper .card .image#image2 {
margin-top: 130px;
}
#foot {
margin-top: 50px;
background: rgb(235, 235, 235);
}
#foot .wrapper {
display: flex;
}
#foot .wrapper .section {
flex: 1;
padding: 50px 30px;
}
#foot .wrapper .section a {
display: block;
color: black;
margin-bottom: 30px;
width: max-content;
}
#foot .wrapper .section h2 {
margin-bottom: 30px;
}
#loader {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
z-index: 999;
}
#loader.loaded {
display: none;
}
#loader span {
font-size: 100px;
}
a.button {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
a.button:hover {
text-decoration: none;
transform: scale(1.1);
}
#whySignup {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#whySignup .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#whySignup .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#whySignup .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#whySignup .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#whySignup .wrapper .section img {
width: 450px;
height: 500px;
}
#phishing {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#phishing .wrapper {
display: flex;
justify-content: start;
flex-direction: row-reverse;
transition: all 0.5s ease-in-out;
}
#phishing .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#phishing .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#phishing .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#phishing .wrapper .section img {
width: 450px;
height: 500px;
}
#nfsw {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#nfsw .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#nfsw .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#nfsw .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#nfsw .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#nfsw .wrapper .section img {
width: 450px;
height: 500px;
}
#signupCall {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#signupCall .wrapper {
display: flex;
flex-direction: column;
transition: all 0.5s ease-in-out;
}
#signupCall .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background: transparent;
}
#signupCall .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
font-size: 50px;
}
#signupCall .wrapper .section:first-child h2 {
font-size: 20px;
margin-bottom: 10px;
}
#signupCall .wrapper .section {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
background-position: -45%;
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 300px;
}
#linksList {
padding: 50px;
}
#linksList .wrapper {
display: flex;
}
#linksList .wrapper .cards {
padding: 30px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
width: 120px;
margin: 30px;
background: cyan;
}
Here's script.js :
window.addEventListener("load", () => {
const loader = document.getElementById("loader");
loader.classList.add("loaded");
})
window.addEventListener("scroll", () => {
let scrollY = window.scrollY;
let posY = 450;
let topnav = document.getElementById("topnav");
if (scrollY < posY) {
topnav.classList.add("transparent");
} else {
topnav.classList.remove("transparent");
}
});
Now the problem is that #linksList doesn't seem to change even though I've written the CSS in style.css. What's wrong about it? I can't seem to find anything that could've conflicted with the CSS. I even gave the .card in #linksList a cyan background to test if it works, but to no result.
Then there's the #topnav, the JS won't add the class .transparent when the user scrolled to the #topnav in links.html until the browser's screen was resized (I'm using Chrome). I have no actual clue about what is going on here. Maybe it's just my browser acting weird or is it because I made some kind of mistake in the scripting?
(sorry for the long question)

Margin auto doesn't work even if I have width and height defined

I want to make the hero title even with the navbar. However, I ran into some responsive issues. Right now I'm doing frontend mentor challenges and they advised that the max width for desktop should be 1440px. Here's where I'm not sure how to do it correctly.
I need the hero title and the logo be in one line.
I want to apply margin auto to navbar but that doesn't seem to work at all.
Any idea how to fix this? My idea is to set the width of the container and navbar both to 1440px= 90em but not sure if that's a right way.
header {
position: absolute;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 90em;
width: 100%;
padding: 2em;
min-height: 8vh;
top: 0;
left: 0;
margin: 0 auto;
}
header img {
width: 10em;
height: 2em;
}
header ul {
list-style: none;
}
header ul a {
text-decoration: none;
}
header ul a li {
display: inline-block;
padding: 2em;
color: white;
}
header ul a li:hover {
color: #000;
}
header .burger {
display: none;
}
#media only screen and (max-width: 996px) {
header {
padding: 2.5em;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
header ul {
display: none;
}
header .burger {
display: block;
}
header .burger img {
width: 3em;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Alata;
}
.container {
min-height: 100vh;
width: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: -ms-grid;
display: grid;
place-items: center;
background-image: url("../images/desktop/image-hero.jpg");
-webkit-box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}
.container__intro {
max-width: 90em;
padding: 2em;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container__intro__desc {
padding: 2em 5em 2em 2em;
border: 1px solid white;
}
.container__intro__desc p {
color: white;
font-size: 4rem;
font-family: Josefin Sans;
}
img {
width: 100%;
height: auto;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a href="">
<img src="images/logo.svg" alt="logo">
</a>
<nav>
<ul>
<a href="">
<li>About</li>
</a>
<a href="">
<li>Careers</li>
</a>
<a href="">
<li>Events</li>
</a>
<a href="">
<li>Products</li>
</a>
<a href="">
<li>Support</li>
</a>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="">
</div>
</nav>
</header>
<div class="container">
<div class="container__intro">
<div class="container__intro__desc">
<p>
Immersive
</p>
<p>
Experiences
</p>
<p>
That Deliver
</p>
</div>
</div>
</div>
<div class="container">
<div class="img-container">
</div>
<div class="__desc">
</div>
</div>
<div class="container">
<div class="__top">
<p>Our Creations</p>
See All
</div>
<div class="__grid">
<div class="item">
<img src="" alt="">
<p>Deep</p>
<p>Earth</p>
</div>
<div class="item">
<img src="" alt="">
<p>Night</p>
<p>Arcade</p>
</div>
<div class="item">
<img src="" alt="">
<p>Soccer</p>
<p>Team VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Grid</p>
</div>
<div class="item">
<img src="" alt="">
<p>From Up</p>
<p>Above VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>Pocket </p>
<p>Borealis</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Curiosity</p>
</div>
<div class="item">
<img src="" alt="">
<p>Make It</p>
<p>Fisheye</p>
</div>
</div>
</div>
</body>
</html>

flexbox, flexbox, flexbox!
#container{
max-width:1440px;
display:flex;
margin:0 auto;
}
#header{
border:solid 2px black;
flex-grow:1;
text-align:center;
}
<div id='container'>
<img src='https://via.placeholder.com/160x32.png' alt='log'>
<div id='header'>
here's to all the girls I...</div>
</div>

JQuery MouseMove on triggered element

I'm try to reach a mousemove triggered by a div, I'm thinking the problem it's on this line of code: [_ $('.mousePointer').css({left:e.pageX, top:e.pageY})_]
because the position of the mouse move it's triggered by the size of the entire page, right?
How can I activate the mousemove on different div and change the img in the pointer on different div?
I hope i can explain the problem. I want to use the mouse move as title of each post
body{
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
background-color: #800f62;
}
.headerz{
background-color: grey;
max-height: 120px;
}
.headerz img{
width: 80px;
margin: 10px;
}
.wrapper{
margin-bottom: 100px;
}
.content{
background-color: purple;
min-height: 200px;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.Post_container{
color: white;
margin: 5%;
background-color: #620c75;
min-width: 80%;
min-height: 400px;
border-radius: 10px 10px 10px 10px;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
/*try follower mouse*/
.mousePointer{
width: 50px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 9999;
}
/*Fine Mouse Follow*/
footer{
background: #121212;
padding: 5px 0;
position: fixed;
left: 0;
bottom: 0;
text-align: center;
width: 100%;
height: 65px;
box-shadow: 0px 0px 08px black;
}
.footer-container{
max-width: 100%;
margin: auto;
padding: 0 20px;
background: black;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
}
.social-media{
margin: 20px 0;
}
.social-media a{
color: white;
margin: 20px;
font-size: 33px;
text-decoration: none;
transition: .3s linear;
}
.social-media a:hover{
color: purple;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"> </script>
<link rel="stylesheet" href="DigiArch_may20200.css">
<link rel="stylesheet" href="try.js">
<title>Digital Archive Update May 2020</title>
</head>
<body>
<div class="headerz">
<img src="1E_Alpha.png" alt="">
</div>
<div class="wrapper">
<div class="content">
<div class="mousePointer" ><img src="https://i.ibb.co/sQXKSH1/1e-Alpha.png" alt="1e-Alpha" border="0" style="width:100px"></div>
<script type="text/javascript">
$(document).mousemove(function(e){
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
</script>
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post
</div>
</div>
<div class="content" >
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post1
</div>
</div>
<footer>
<div class="footer-container">
<div class="social-media">
<i class="fab fa-instagram"></i>
<i class="fab fa-soundcloud"></i>
<i class="fab fa-behance"></i>
<i class="fab fa-twitch"></i>
<i class="fab fa-paypal"></i>
</div>
</div>
</footer>
</body>
</html>

The problem is with the document. It's targeting the whole page whereas what you need is to focus it on .Post_container since its the container of your image. That's pretty much it.
$(".Post_container").mousemove(function(e){ //======> replaced document with container class
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
Hope it helps :)

Categories

Resources