My current project involves creating a full-screen pop-up for a specific application.
/* Custom 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; /* Enable 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 the 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...</p>
<button class="close-button">Close</button>
</div>
</div>In my implementation, I have successfully added a functional close button but removed some unnecessary code to simplify the project.
The issue I'm facing is that sometimes the h2 heading, popup content, and close button do not appear on mobile screens. Additionally, both vertical and horizontal scrolling is disabled on mobile devices.
I've experimented with various CSS properties such as position, max-width, and max-height, but have been unsuccessful in resolving these issues on mobile devices. The page's behavior on mobiles has been erratic.
If you could provide assistance in fixing these problems, it would be greatly appreciated.