Make full screen pop up responsive

Question

I'm making a full-screen pop-up to work for one application.

  /* Full Screen Popup */
    .fullscreen-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background-color: #f44336;
      color: #fff;
      cursor: pointer;
    }
    
    .popup-content {
      position: relative;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      text-align: justify;
      max-width: 80vw; /* Adjust max width for smaller screens */
      overflow-y: auto; /* Allow vertical scrolling if needed */
    }
    
    /* Media Queries for Responsive Design */
    
    /* Tablet and Larger Screens */
    @media screen and (min-width: 768px) {
      .details-container {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
      }
    }
    
    /* Mobile Screens */
    @media screen and (max-width: 767px) {
      .details-container {
        grid-template-columns: repeat(1, minmax(100%, 1fr));
      }
    
      /* Full Screen Popup Adjustments */
      .fullscreen-popup {
        padding: 20px;
      }
    
      .close-button {
        top: 5px;
        right: 5px;
      }
    
      .popup {
        width: 90%;
        max-width: 90vw;
      }
    }
    img{
        height: 50%;
        width: 50%;
    }

<div class="fullscreen-popup">
   <div class="popup-content">
        <h2>This is title of h2</h2>
        <img src="https://wallpapers.com/images/hd/720p-nature-background-7dtz4pan3cr3ot5v.jpg">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.</p>
         <button class="close-button">Close</button>
    </div>
</div>

I have implemented a close button to work correctly, and I have removed working code from the project to simplify my question.

The problem I have is that sometimes h2, popup-content, and close-button don't show on mobile screen sizes. Also scrolling both vertical and horizontal is not working on mobile.

I have tried with position properties, max-width, and max-height, but nothing seems to work on mobile. Page behaves very strangely on mobiles.

Could you please help me to fix this?

Answer 1

/* Full Screen Popup */

.fullscreen-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #f44336;
  color: #fff;
  cursor: pointer;
}

.popup-content {
  position: relative;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  text-align: justify;
  max-width: 80vw; /* Adjust max width for smaller screens */
  overflow-y: auto; /* Allow vertical scrolling if needed */
  max-height: 90vh;
}

/* Media Queries for Responsive Design */

/* Tablet and Larger Screens */
@media screen and (min-width: 768px) {
  .details-container {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }
}

/* Mobile Screens */
@media screen and (max-width: 767px) {
  .details-container {
    grid-template-columns: repeat(1, minmax(100%, 1fr));
  }

  /* Full Screen Popup Adjustments */
  .fullscreen-popup {
    padding: 20px;
  }

  .close-button {
    top: 5px;
    right: 5px;
  }

  .popup {
    width: 90%;
    max-width: 90vw;
  }
}
img {
  height: 50%;
  width: 50%;
}

<div class="fullscreen-popup">
  <div class="popup-content">
    <h2>This is title of h2</h2>
    <img
      src="https://wallpapers.com/images/hd/720p-nature-background-7dtz4pan3cr3ot5v.jpg"
    />
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda,
      nihil voluptas adipisci dolor quisquam totam doloremque corrupti
      laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum
      tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing
      elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam
      doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla
      possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur
      adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam
      totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem,
      nulla possimus laborum tempore atque. Ab.
    </p>
    <button class="close-button">Close</button>
  </div>
</div>

try this