In order to make a pop-up box responsive to mobile or tablet devices, the @media query can be used.
Query
@media only screen and (max-width: 600px) {
}Also see, https://www.w3schools.com/css/css_rwd_mediaqueries.asp, for a more technical explanation.
About @media
Using the @media function, you can set devices which have a fixed width to be overridden with certain criteria.
Example code
In our example below, .popup has the default width of 420px. However, when the device has a max-width of 600px (for example, a mobile phone), then the width is overridden. The .popup div is given 2% margin on the right and left.
.popup{
width: 420px;
}
@media only screen and (max-width: 600px) {
.popup{
width: unset;
right:2%;
left: 2%;
}
}
