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>
Related
I have no idea why the scroll-snap-type CSS property isn't working as expected.
I just want the page to scroll down to each div smoothly and it doesn't want to work.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (scroll) {
scroll.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 500vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project</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=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>
</body>
</html>
The reason your code isn't working is because you are using the body/html's scroll bar. You should be using the .mainContent's scrollbar instead. So the following code will hide the scroll bar of body/html and add the scroll bar to the .mainContent element by setting it's height to 100vh.
See modified CSS code below:
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
html, body {
overflow: hidden;
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 100vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project</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=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>
I have a project in CS class where we have to clone an app that we use on a daily basis. I chose cashapp. I have a flexbox container holding the balance value, and I want the balance text to be responsive and shit itself to always be centered in the middle of the screen. I've achieved this with justify-content: center, however when I add text it doesn't responsively shift itself to stay centered. Also if you run the snippet you might want to resize it to 720 x 1520 b/c that is the resolution of the android Im making this for. Any suggestions? Dont flame me if the code issn't clean this is my first highschool CS class
document.getElementById('backspace').addEventListener('click', backspace)
let fired_button
let moneyval = document.getElementById('money')
$("button").click(function() {
fired_button = $(this).val();
let emptyArray = []
emptyArray.push(moneyval.textContent)
console.log(emptyArray)
for (var i = 0; i < emptyArray.length; i++) {
if (emptyArray[0] == "$0") {
moneyval.textContent = "$" + fired_button
} else {
moneyval.textContent += fired_button
}
}
});
function backspace() {
console.log(moneyval.textContent)
let string = moneyval.textContent
string = string.substring(0, string.length - 1);
moneyval.textContent = string
}
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
body {
background-color: blue;
font-family: 'Inter';
width: 720px;
height: 1520px;
}
#camera,
#search,
#profile {
background-color: blue;
color: black;
border: 0;
}
.camera {
margin-left: 15px;
}
.search {
margin-left: 8px;
}
.head-section {
position: absolute;
top: 60px;
}
.head-right {
position: absolute;
right: 40px;
top: 60px;
}
.money {
color: rgba(255, 255, 255, 0.87);
font-size: 150px;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
line-height: 182px;
position: absolute;
width: 198px;
height: 182px;
margin: 0;
}
.usd {
position: absolute;
width: 146.4px;
height: 61px;
background: blue;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
border-radius: 43px;
color: white;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 30px;
border-style: none;
}
.numberpad {
position: absolute;
width: 850px;
height: 540px;
left: -45px;
top: 730px;
}
.row1 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row2 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row3 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row4 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row1,
.row2,
.row3,
.row4 {
margin-top: 80px;
}
button {
border-style: none;
background-color: blue;
color: white;
font-size: 40px;
font-style: normal;
font-weight: 400;
}
.subcta {
border-style: solid;
position: absolute;
top: 1300px;
}
.sub-cta {
display: flex;
position: absolute;
width: 750px;
height: 124px;
left: -2px;
top: 1260px;
justify-content: space-evenly;
}
.sub-button {
border-style: solid;
border-radius: 1.3em;
padding: .3em;
background-color: black;
border-color: #0CC337;
width: 293px;
height: 88px;
}
.balance-container {
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
position: absolute;
width: 720px;
height: 219px;
left: -20px;
top: 323px;
}
<!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="/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="head-section">
<button id="camera"> <img src="/images/image 1.png" alt=""></button>
<button id="search"> <img src="/images/image 2.png" alt=""></button>
</div>
<div class="head-right">
<button id="profile"><img src="/images/image 3.png" alt=""></button>
</div>
<div class="balance-container">
<h1 id="money" class="money">$0</h1>
</div>
<div>
</div>
<section class="numberpad">
<div class="row1">
<button class="numpad" name="1" id="1" value="1">1</button>
<button name="2" id="2" value="2">2</button>
<button name="3" id="3" value="3">3</button>
</div>
<div class="row2">
<button name="4" id="4" value="4">4</button>
<button name="5" id="5" value="5">5</button>
<button name="6" id="6" value="6">6</button>
</div>
<div class="row3">
<button name="7" id="7" value="7">7</button>
<button name="8" id="8" value="8">8</button>
<button name="9" id="9" value="9">9</button>
</div>
<div class="row4">
<button name="." id="." value=".">.</button>
<button name="0" id="0" value="0">0</button>
<button id="backspace"><</button>
</div>
</section>
<section class="sub-cta">
<div>
<button class="sub-button">Request</button>
</div>
<div>
<button id="pay" class="sub-button">Pay</button>
</div>
</section>
<script src="/main.js"></script>
</body>
</html>
Flexbox doesn't organize the absolute positioned items. As a best practise, you should avoid absolute positioning in order to achieve responsive layout in most cases.
As I understand from your question, I have achieved what you want to do like that:
1. I removed all the absolute positioning
2. I removed explicit width styles of the body, .numberpad, .subcta, .sub-cta and .numberpad
3. Wrapped all these elements with <main> tag (except body)
4. Styled <main> with display: flex and align-items: center
Check it here:
document.getElementById('backspace').addEventListener('click', backspace)
let fired_button
let moneyval = document.getElementById('money')
$("button").click(function() {
fired_button = $(this).val();
let emptyArray = []
emptyArray.push(moneyval.textContent)
console.log(emptyArray)
for (var i = 0; i < emptyArray.length; i++) {
if (emptyArray[0] == "$0") {
moneyval.textContent = "$" + fired_button
} else {
moneyval.textContent += fired_button
}
}
});
function backspace() {
console.log(moneyval.textContent)
let string = moneyval.textContent
string = string.substring(0, string.length - 1);
moneyval.textContent = string
}
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
body {
background-color: blue;
font-family: 'Inter';
height: 1520px;
}
#camera,
#search,
#profile {
background-color: blue;
color: black;
border: 0;
}
.camera {
margin-left: 15px;
}
.search {
margin-left: 8px;
}
.head-section {
position: absolute;
top: 60px;
}
.head-right {
position: absolute;
right: 40px;
top: 60px;
}
.money {
color: rgba(255, 255, 255, 0.87);
font-size: 150px;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
line-height: 182px;
position: absolute;
width: 198px;
height: 182px;
margin: 0;
}
.usd {
position: absolute;
width: 146.4px;
height: 61px;
background: blue;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
border-radius: 43px;
color: white;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 30px;
border-style: none;
}
.numberpad {
position: relative;
width: 850px;
height: 540px;
}
.row1 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row2 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row3 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row4 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row1,
.row2,
.row3,
.row4 {
margin-top: 80px;
}
button {
border-style: none;
background-color: blue;
color: white;
font-size: 40px;
font-style: normal;
font-weight: 400;
}
.subcta {
border-style: solid;
position: relative;
}
.sub-cta {
display: flex;
position: relative;
width: 750px;
height: 124px;
justify-content: space-evenly;
}
.sub-button {
border-style: solid;
border-radius: 1.3em;
padding: .3em;
background-color: black;
border-color: #0CC337;
width: 293px;
height: 88px;
}
.balance-container {
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
position: relative;
width: 720px;
height: 219px;
}
main {
width:100%;
display: flex;
align-items: center;
flex-direction: column;
}
<!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="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="head-section">
<button id="camera"> <img src="/images/image 1.png" alt=""></button>
<button id="search"> <img src="/images/image 2.png" alt=""></button>
</div>
<div class="head-right">
<button id="profile"><img src="/images/image 3.png" alt=""></button>
</div>
<main>
<div class="balance-container">
<h1 id="money" class="money">$0</h1>
</div>
<div>
</div>
<section class="numberpad">
<div class="row1">
<button class="numpad" name="1" id="1" value="1">1</button>
<button name="2" id="2" value="2">2</button>
<button name="3" id="3" value="3">3</button>
</div>
<div class="row2">
<button name="4" id="4" value="4">4</button>
<button name="5" id="5" value="5">5</button>
<button name="6" id="6" value="6">6</button>
</div>
<div class="row3">
<button name="7" id="7" value="7">7</button>
<button name="8" id="8" value="8">8</button>
<button name="9" id="9" value="9">9</button>
</div>
<div class="row4">
<button name="." id="." value=".">.</button>
<button name="0" id="0" value="0">0</button>
<button id="backspace"><</button>
</div>
</section>
<section class="sub-cta">
<div>
<button class="sub-button">Request</button>
</div>
<div>
<button id="pay" class="sub-button">Pay</button>
</div>
</section>
</main>
<script src="/main.js"></script>
</body>
</html>
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.
I would like for <li>Home</li> to be automatically active when a user arrives at my page.
Is there any way to use css, html, or js to set a link to active by default when the user initially arrives at the site? That way, the :active style will visually indicate the location of the nav bar.
Also, once the user clicks on another list item, <li>Home</li> should no longer be active until clicked again.
Thanks, everyone.
Here is the 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">
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./images/Pizza logo.jpg" type="image/x-icon">
<title>Best slice</title>
</head>
<body>
<!-- HEADING -->
<h1>Best Slice (NYC)</h1>
<!-- NAV -->
<div class="nav-container">
<ul>
<li>Home</li>
<li>Slices</li>
<li>Team</li>
<!-- <li>Locations</li> -->
</ul>
</div>
<!-- SLOGAN -->
<div class="slogan-container">
<p>Pizza, you'd <strong>die</strong> for.</p>
</div>
<!-- SLICES -->
<div id='slices' class="slices-container">
<div class="slices-text">
<h2>By the slice</h2>
<h4>Premium slices of za' just seconds out of the oven</h4>
</div>
<div class="slice-cards">
<div class="card">
<img src="./images/Sausage pizza.jpg" alt="Sausage Pizza">
<br>
<span>Sausage, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa">
<br>
<span>Pepperoni, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Cheese Pizza.jpg" alt="Cheese pizza">
<br>
<span>Cheese, $7.99/slice</span>
</div>
<div class="card">
<img src="./images/Pineapple Pizza.jpg" alt="Pineapple Pizza">
<br>
<span>Pineapple, $10.99/slice</span>
</div>
<div class="card">
<img src="./images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza">
<br>
<span>Buffalo Chicken, $10.99/slice</span>
</div>
</div>
</div>
<!-- TEAM -->
<div class="team-container" id="team">
<div class="team-text">
<h2>Team</h2>
<h4>Meet the genuis behind our insanely good recipes</h4>
</div>
<div class="team-cards">
<div class="team-member-card">
<img src="./images/Chef.jpg" alt="Head Chef">
<h3>Alex, Chef</h3>
<p>Awarded #1 slice in Manhattan.</p>
</div>
<div class="team-member-card">
<img src="./images/Cashier.jpg" alt="Cashier">
<h3>Jack, Cashier</h3>
<p>Decent at math.</p>
</div>
<div class="team-member-card">
<img src="./images/Delivery boy.jpg" alt="Pizza Delivery Boy">
<h3>Matt, Delivery Boy</h3>
<p>He has a need for speed.</p>
</div>
</div>
</div>
</body>
<footer>
<p>Email: Bestslice#bestslicenyc.com</p>
<p>Call us: (XXX) XXX-XXX</p>
<p>Dine with us: 111 Madison Ave NYC</p>
<p>© Best Slice NYC 2021</p>
</footer>
</html>
Here is the CSS
/* Global settings */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
/* GLOBAL HEADINGS & TEXT */
h1 {
text-align: center;
font-size: 6rem;
font-family: 'Bebas Neue', cursive;
margin-top: 1rem;
color: tomato;
}
h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
color: tomato;
}
h3, h4 {
font-size: 1.5rem;
font-family: 'Varela Round', sans-serif;
padding: 10px;
}
p {
font-size: 1.2rem;
padding: 10px;
}
/* NAV */
.nav-container {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
ul {
list-style-type: none;
}
li {
display: inline;
font-size: 1.25rem;
font-family: 'Varela Round', sans-serif;
}
li a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
transition: 0.5s;
}
li a:hover {
background-color: tomato;
border-radius: 2.5rem;
color: white;
}
/* SLOGAN */
.slogan-container {
margin-top: 2rem;
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 50vh;
/* border: red 1px solid; */
}
.slogan-container p {
font-family: 'Varela Round', sans-serif;
font-size: 6rem;
display: block;
}
/* SLICES SECTION */
.slices-container {
margin: auto;
margin-bottom: 7rem;
/* border: red 1px solid; */
margin-top: 1rem;
}
.slices-text {
margin-bottom: 2rem;
}
.slice-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* border: red 5px solid; */
padding-top: 2rem;
}
.card {
/* border: blue 3px solid; */
margin-top: 2rem;
}
.card img {
width: 350px;
height: 300px;
overflow: hidden;
}
.card span {
font-family: 'Varela Round', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: tomato;
}
/* TEAM */
.team-container {
width: auto;
/* border: red 5px solid; */
margin-bottom: 3rem;
}
.team-text {
margin-bottom: 2rem;
}
.team-cards {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.team-member-card img {
height: 300px;
width: 250px;
}
/* FOOTER */
footer {
background-color: black;
padding: 15px;
}
footer p {
color: white;
z-index: 10;
font-family: 'Varela Round', sans-serif;
}
#media only screen and (max-width: 500px) {
h1 {
font-size: 5rem;
}
.slogan-container {
height: 40vh;
margin-top: 3rem;
margin-bottom: 3rem;
}
}
You can .focus the element.
const anchor = document.querySelector('a[href="#"]')
anchor.focus()
/* Global settings */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
/* GLOBAL HEADINGS & TEXT */
h1 {
text-align: center;
font-size: 6rem;
font-family: 'Bebas Neue', cursive;
margin-top: 1rem;
color: tomato;
}
h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
color: tomato;
}
h3, h4 {
font-size: 1.5rem;
font-family: 'Varela Round', sans-serif;
padding: 10px;
}
p {
font-size: 1.2rem;
padding: 10px;
}
/* NAV */
.nav-container {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
ul {
list-style-type: none;
}
li {
display: inline;
font-size: 1.25rem;
font-family: 'Varela Round', sans-serif;
}
li a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
transition: 0.5s;
}
li a:hover {
background-color: tomato;
border-radius: 2.5rem;
color: white;
}
/* SLOGAN */
.slogan-container {
margin-top: 2rem;
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 50vh;
/* border: red 1px solid; */
}
.slogan-container p {
font-family: 'Varela Round', sans-serif;
font-size: 6rem;
display: block;
}
/* SLICES SECTION */
.slices-container {
margin: auto;
margin-bottom: 7rem;
/* border: red 1px solid; */
margin-top: 1rem;
}
.slices-text {
margin-bottom: 2rem;
}
.slice-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* border: red 5px solid; */
padding-top: 2rem;
}
.card {
/* border: blue 3px solid; */
margin-top: 2rem;
}
.card img {
width: 350px;
height: 300px;
overflow: hidden;
}
.card span {
font-family: 'Varela Round', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: tomato;
}
/* TEAM */
.team-container {
width: auto;
/* border: red 5px solid; */
margin-bottom: 3rem;
}
.team-text {
margin-bottom: 2rem;
}
.team-cards {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.team-member-card img {
height: 300px;
width: 250px;
}
/* FOOTER */
footer {
background-color: black;
padding: 15px;
}
footer p {
color: white;
z-index: 10;
font-family: 'Varela Round', sans-serif;
}
#media only screen and (max-width: 500px) {
h1 {
font-size: 5rem;
}
.slogan-container {
height: 40vh;
margin-top: 3rem;
margin-bottom: 3rem;
}
}
<!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="./styles.css">
<link rel="shortcut icon" href="./images/Pizza logo.jpg" type="image/x-icon">
<title>Best slice</title>
</head>
<body>
<!-- HEADING -->
<h1>Best Slice (NYC)</h1>
<!-- NAV -->
<div class="nav-container">
<ul>
<li>Home</li>
<li>Slices</li>
<li>Team</li>
<!-- <li>Locations</li> -->
</ul>
</div>
<!-- SLOGAN -->
<div class="slogan-container">
<p>Pizza, you'd <strong>die</strong> for.</p>
</div>
<!-- SLICES -->
<div id='slices' class="slices-container">
<div class="slices-text">
<h2>By the slice</h2>
<h4>Premium slices of za' just seconds out of the oven</h4>
</div>
<div class="slice-cards">
<div class="card">
<img src="./images/Sausage pizza.jpg" alt="Sausage Pizza">
<br>
<span>Sausage, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa">
<br>
<span>Pepperoni, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Cheese Pizza.jpg" alt="Cheese pizza">
<br>
<span>Cheese, $7.99/slice</span>
</div>
<div class="card">
<img src="./images/Pineapple Pizza.jpg" alt="Pineapple Pizza">
<br>
<span>Pineapple, $10.99/slice</span>
</div>
<div class="card">
<img src="./images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza">
<br>
<span>Buffalo Chicken, $10.99/slice</span>
</div>
</div>
</div>
<!-- TEAM -->
<div class="team-container" id="team">
<div class="team-text">
<h2>Team</h2>
<h4>Meet the genuis behind our insanely good recipes</h4>
</div>
<div class="team-cards">
<div class="team-member-card">
<img src="./images/Chef.jpg" alt="Head Chef">
<h3>Alex, Chef</h3>
<p>Awarded #1 slice in Manhattan.</p>
</div>
<div class="team-member-card">
<img src="./images/Cashier.jpg" alt="Cashier">
<h3>Jack, Cashier</h3>
<p>Decent at math.</p>
</div>
<div class="team-member-card">
<img src="./images/Delivery boy.jpg" alt="Pizza Delivery Boy">
<h3>Matt, Delivery Boy</h3>
<p>He has a need for speed.</p>
</div>
</div>
</div>
</body>
<footer>
<p>Email: Bestslice#bestslicenyc.com</p>
<p>Call us: (XXX) XXX-XXX</p>
<p>Dine with us: 111 Madison Ave NYC</p>
<p>© Best Slice NYC 2021</p>
</footer>
</html>
Add an id to your object, es "homeLink":
<li>Home</li>
.
window.addEventListener('load', (event) => {
document.getElementById("homeLink").focus();
});
FIRST METHOD:
You can just simply make an ID and tabindex="0" attribute for the element:
<li>Home</li>
And then focus it with JS:
document.getElementById("focusTime").focus();
SECOND METHOD:
You can just simply make an :active CSS pseudo-class by default only in JS!:
document.getElementById("focusTime").active();
And then it'll simply make the element "clicked" by JS!
THIRD METHOD:
document.getElementById("focusTime").click()
SAME AS THE SECOND METHOD
I hope very much this helps!
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 :)