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"> <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 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>
Advertisement
Answer
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"> <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 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>