Currently, I am developing a website that utilizes javascript, html, and css. One of the pages on the site displays all users as list items within an unordered list, which is nested inside two separate div elements. When accessing the page on my phone, both of these divs are generating scroll bars; however, when viewed on a computer, there is no issue with scrolling. My goal is to make this website responsive and mobile-friendly, but the presence of these two scroll bars is hindering usability on a phone.
Below, you will find the code for the page. Please be aware that there may be some unused CSS properties, so it's best to overlook those. The unordered list with the id "supervisee-list" dynamically populates with all the users' information.
Here is the HTML code for the page (note that the Handlebars view engine is being utilized):
<link rel="stylesheet" href="../css/admin-managesupers.css">
<div id="background">
{{> navbar}}
<div id="employee-manage" class="hidden-div">
<button id="back-btn"><span id="back-sign"><</span> Back</button>
<h1 id="employee-name">Carsdan Dvorachek</h1>
<h2 id="supervisor-title">Supervisor Status</h2>
<select name="supervisor-status" id="supervisor-status-select"></select>
<h2 id="supervisor-title">Supervising</h2>
<ul id="supervisee-list">
</ul>
</div>
</div>
<script src="../js/admin-managesupers.js"></script>
Here is the corresponding CSS code:
#background {
width: 100vw;
height: 100vh;
background-color: gainsboro;
margin: 0;
overflow: scroll;
}
.hidden-div {
display: none;
}
#employee-manage, #employee-select {
width: 90%;
height: auto;
max-width: 600px;
background-color: white;
margin: 0 auto;
text-align: center;
box-shadow: 0 0 15px grey;
padding-bottom: 20px;
overflow: hidden;
position: relative;
}
#select-employee-title {
padding-top: 20px;
}
li {
border: 1px solid;
list-style: none;
position: relative;
text-align: left;
padding: 10px 15px;
margin: 10px auto;
max-width: 80%;
}
li:hover {
background-color: gainsboro;
}
.mark-super {
position: absolute;
right: 10px;
text-align: right;
}
#back-btn {
position: absolute;
left: 10px;
top: 10px;
background: none;
border: solid 2.5px rgb(9, 139, 175);
margin: 20px;
color: rgb(9, 139, 175);
font-size: 100%;
padding: 5px;;
}
#back-sign {
font-size: 110%;
}
#employee-name {
padding-top: 60px;
}
.supervisee, .supervisee > span {
color: green;
}
.othersupervisee, .othersupervisee > span {
color: grey;
border-color: grey;
}
#supervisee-list, #employee-list {
padding-left: 0;
}
@media screen and (max-width: 580px) {
.mark-super {
position: static;
display: block;
}
}
Despite experimenting with various combinations of overflow: hidden and overflow: scroll on different elements, I have not found a solution to eliminate the multiple scroll bars causing issues on mobile devices.