Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
134
rated 0 times [  140] [ 6]  / answers: 1 / hits: 22593  / 10 Years ago, fri, january 30, 2015, 12:00:00

Basically my website is Responsive but below is the code for my popup div div is working good on desktop but on mobile portrait it just goes out of the screen, I need to make this div responsive also. additionally i want this div to appear on screen with fadein or other animation which is i dont know how to use now. plz help



HTML is here:



    <section id=html class=content-section text-center>
<div class=download-section>
<div class=container>
<div class=col-lg-8 col-lg-offset-2>
<h2>HTML Tutorials</h2>
<p></p>
<a href=javascript:void(0) class=btn btn-default btn-lg onclick=toggle_visibility('popupBoxHTML');>More HTML Tutorials</a>
<div id=popupBoxHTML>
<div class=popupBoxWrapper>
<div class=popupBoxContent>
<h3>HTML</h3>
<p>You are currently viewing HTML Box.</p>
<p>Click <a href=javascript:void(0) onclick=toggle_visibility('popupBoxHTML');>here</a> to close popup box one. </p>
</div>
</div>
</div>
</div>
</div>
</section>


CSS Here:



#popupBoxOnePosition, #popupBoxHTML{
margin:10px 0 0 0;
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background:#333;
display: none;
opacity:.95;
z-index:100;
widows:50%;

}

.popupBoxWrapper{
width: 550px;
margin:
50px auto;
text-align: left;

}
.popupBoxContent{
background-color:
#000;
padding:
15px;
opacity:1;
border-radius:15px;
-o-box-shadow:0 0 50px ##219ab3;
-moz-box-shadow:0 0 50px ##219ab3;
-webkit-box-shadow:0 0 50px ##219ab3;
-ms-box-shadow:0 0 50px ##219ab3;
transition:ease-in;
transition-delay:1s;
-webkit-transition:ease-in;
}


javascript here:



    function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';

}

More From » css

 Answers
3

You'll need to add media query to make it responsive.



@media only screen and (max-width: 600px) {
.popupBoxWrapper{
width:100%;
}
}


When screen-width goes below 600px, this css will make the width of popup 100% instead of fixed 550px. So this will make the div fit to the screen.


[#68017] Thursday, January 29, 2015, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ignacio

Total Points: 467
Total Questions: 128
Total Answers: 79

Location: Luxembourg
Member since Tue, Mar 14, 2023
1 Year ago
ignacio questions
;