How can I make this Modal and its contents Responsive? - html

Question

Please Some one Tell me how do i make this Modal Responsive.
This is the Html code For the Modal and its Content.
<div class="modal-content">
<span class="close">×</span>
<br/>
<div class = "modal_img">
<img id = "modal_pic" src="resources/images/round/aqua.jpg">
</div>
<div class = "modal_desc">
<h3>PRODUCT DESCRIPTION</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="colors">
</div>
</div>
And This is the CSS for The Modal Element and its Content.
Can Someone please tell me how do I alter these to make it Responsive
Thank You Very Much for your help:
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: red;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal_img{
margin:20px 40px;
width: 25%;
height: 430px;
display: inline-block;
}
#modal_pic{
margin:auto;
width: 100%;
height: 100%;
border: solid black;
}
.modal_desc{
width: 30%;
float: right;
margin-top: 20px;
margin-right: 20%;
display: inline-block;
}
How do I make it Responsive.

Answer 1

In your css document use some of these:
#media all and (max-width: 900px) {
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
Also use firefox (F12) has a nice Responsive Design view so you can test out your website easier
with the #media tags you have to think what it will look like on a mobile first and then use the #media tags to change how the site looks for bigger desplay devices