I have implemented a popup for the menu section on the home page. As you scroll down, you can access the menu section right below the reservation button. The popup functions perfectly on desktop devices. However, when I try to open the same page on a mobile device and click on the menu, the popup ends up overlapping with the background.
I've been trying to pinpoint the issue but haven't had any luck so far. On desktop, everything works seamlessly, and that's the experience I want to replicate on mobile devices as well.
Here is the URL:
Below is the CSS code snippet I utilized to create the modal:
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: #000;
}
.modal-content {
background-color: #000 !important;
color: #d4d2d2 !important;
border: 1px solid #451d22!important;
padding: 0 20px;
overflow-y: scroll;
overflow-x: hidden;
height: 560px;
overflow: auto;
background-color: #000;
border-radius: 0px !important;
}