Looking for help with a web application built using HTML/CSS/Bootstrap 5/JS and Rust/Actix-web? Check out the code here.
The index page of the app features a navbar and a div containing four buttons in the center (vertically and horizontally aligned). The current method for resizing the buttons involves calculating the size based on the text above and dividing it by 4 to determine the width of each button. However, there are two main issues: when the user's name is short, the buttons end up being small and on medium-sized devices like tablets, the font size remains large compared to laptops due to difficulty in configuring @media screen accurately.
As a result, there is overflow within the buttons.
let divElement = document.getElementById("welcome");
let buttons = document.getElementsByClassName('button-group-element')
let buttons_array = Array.from(buttons)
let elemWidth = divElement.offsetWidth / buttons_array.length;
for (i = 0; i < buttons_array.length; i++) {
if (i != 0) {
buttons_array[i].style.marginLeft = elemWidth * i + "px"
}
buttons_array[i].style.width = elemWidth + "px"
}html,
body {
position: relative;
height: 100%;
width: 100%;
}
body {
display: flex;
position: absolute;
align-items: center;
bottom: 40%;
justify-content: center;
background-color: #0000;
}
#welcome {
text-align: center;
}
.button-group-element {
text-align: center;
position: absolute;
height: 40%;
}
@media screen and (min-width: 707px) {
.button-group-element {
font-size: 2em;
}
}
@media screen and (max-width: 706px) {
.button-group-element {
font-size: 1.3em;
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font/bootstrap-icons.css">
<h1 id="welcome">Welcome John Doe!</h1>
<div class="button-group">
<button onclick="window.location.href='/add_question'" type="button" class="btn btn-outline-primary button-group-element"><i class="bi bi-plus-circle"></i> <br>New Question</button><button type="button" class="btn btn-outline-primary button-group-element"
onclick="window.location = '/modify_question'"><i class="bi bi-pen"></i> <br>Modify Question</button><button type="button" class="btn btn-outline-primary button-group-element" onclick="window.location = '/student_question'"><i class="bi bi-mortarboard"></i> <br>Student Questions</button>
<button
type="button" class="btn btn-outline-primary button-group-element" onclick="window.location = '/statistics'"><i class="bi bi-bar-chart"></i> <br>Statistics</button> </div>