Need to remove the extra popup layout

Hi experts. I have created a popup for attaching a file. I have used some custom css on the popup. SO when the page loads, the popup looks good. But as I reduce or increase the screen resolution, I can see a extra popup. I am not sure how to remove it? I need help in removing the extra black popup behind my required popup. I have attached the screenshots of my popup and the css I have used on the popup. CSS screenshot:     Popup screenshot:
2 answers

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 */  }}