I’m making full screen pop up to work for one application.
<code><!DOCTYPE html>
<style>
/* 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%;
}
</style>
<body>
<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>
</body>
</code>
<code><!DOCTYPE html>
<style>
/* 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%;
}
</style>
<body>
<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>
</body>
</code>
<!DOCTYPE html>
<style>
/* 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%;
}
</style>
<body>
<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>
</body>
I have implemented close button to work correctly, and I have removed working code from 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, max-heiht, but nothing seems to work on mobile. Page behaves very strangely on mobiles.
Could you please help me to fix this?