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 >
<button id="camera"> <a href="#"><img src="/images/image 1.png" alt=""></a></button>
<button id="search"> <a href="#"><img src="/images/image 2.png" alt=""></a></button>
</div>
<div >
<button id="profile"><img src="/images/image 3.png" alt=""></button>
</div>
<div >
<h1 id="money" >$0</h1>
</div>
<div>
</div>
<section >
<div >
<button 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 >
<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 >
<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 >
<button name="." id="." value=".">.</button>
<button name="0" id="0" value="0">0</button>
<button id="backspace"><</button>
</div>
</section>
<section >
<div>
<button >Request</button>
</div>
<div>
<button id="pay" >Pay</button>
</div>
</section>
<script src="/main.js"></script>
</body>
</html>
CodePudding user response:
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 >
<button id="camera"> <a href="#"><img src="/images/image 1.png" alt=""></a></button>
<button id="search"> <a href="#"><img src="/images/image 2.png" alt=""></a></button>
</div>
<div >
<button id="profile"><img src="/images/image 3.png" alt=""></button>
</div>
<main>
<div >
<h1 id="money" >$0</h1>
</div>
<div>
</div>
<section >
<div >
<button 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 >
<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 >
<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 >
<button name="." id="." value=".">.</button>
<button name="0" id="0" value="0">0</button>
<button id="backspace"><</button>
</div>
</section>
<section >
<div>
<button >Request</button>
</div>
<div>
<button id="pay" >Pay</button>
</div>
</section>
</main>
<script src="/main.js"></script>
</body>
</html>