Hi, Harsh B
it is not extra popup. you write custom css that why position of shadowbox move to side. plz comment below one check it once, I hope it will be work.
// position: fixed;
Thank you,
K. Ravikumar
try this
.popuppage { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; /* Use percentage for responsiveness */ max-width: 600px; /* Maximum width can still be 600px */ height: auto; /* Auto height for content adaptability */ max-height: 275px; /* Maximum height can be set */ background: #FFFFFF; border-radius: 12px; box-shadow: 0px 3px 9px #0000001F; opacity: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 1rem; /* Use relative unit */ letter-spacing: 0.54px; padding: 20px; /* Add some padding */ box-sizing: border-box; /* To include padding in the width */ overflow: hidden; /* In case content overflows */ z-index: 1000; /* Make sure it's on top of other elements */}
/* Media Query for smaller screens */@media (max-width: 768px) { .popuppage { width: 90%; /* Increase width for small screens */ font-size: 0.9rem; /* Smaller font size on small screens */ }}
/* Media Query for very small screens */@media (max-width: 480px) { .popuppage { width: 95%; /* Increase width for very small screens */ font-size: 0.8rem; /* Even smaller font size on very small screens */ }}