I've been working on a webpage for my mother's students, and I'm facing some challenges. When I view the page on mobile, everything adjusts except for the buttons. They end up overlapping each other, creating a messy layout. Additionally, I'm relatively new to web development.
Here is the code snippet related to the buttons on my homepage:
const showMenu = (toggleId, navId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if(toggle && nav){
toggle.addEventListener('click', ()=>{
nav.classList.toggle('show')
})
}
}
showMenu('nav-toggle','nav-menu')
/*===== ACTIVE AND REMOVE MENU =====*/
const navLink = document.querySelectorAll('.nav__link');
function linkAction(){
/*Active link*/
navLink.forEach(n => n.classList.remove('active'));
this.classList.add('active');
/*Remove menu mobile*/
const navMenu = document.getElementById('nav-menu')
navMenu.classList.remove('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction));.button{
display: inline-block;
background-color: var(--first-color);
text-align:center;
color: #fff;
padding: .75rem 2.5rem;
font-weight: var(--font-semi);
border-radius: .5rem;
}
#but0{
display: inline-block;
background-color: var(--first-color);
text-align:center;
color: #fff;
padding: .75rem 2.5rem;
font-weight: var(--font-semi);
border-radius: .5rem;
}
#but1{
display: inline-block;
background-color: var(--first-color);
text-align:center;
position:absolute; right: 42%;
color: #fff;
padding: .75rem 2.5rem;
font-weight: var(--font-semi);
border-radius: .5rem;
}
#but2{
display: inline-block;
background-color: var(--first-color);
text-align:center;
position: absolute; right: 10%;
color: #fff;
padding: .75rem 2.5rem;
font-weight: var(--font-semi);
border-radius: .5rem;
} <a target="_blank" href="#" class="button" id="but0">Online Regulations
<p id="settings-note">*Download here</p></a>
<a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSdZ5dzDCllrRvxbugJOvGCzka4T92vBmaNizDaIVY6uYSzGVQ/viewform?usp=sf_link"
class="button" id="but1">Attendance
<p id="settings-note">*Link here</p>
<a target="_blank" href="#" class="button" id="but2">Schedules
<p id="settings-note">*Download here</p></a>