Making a modal responsive

Question

I’m working on a frontend excercise I set up for improving myself and I have hit a real huge headache.

I am trying to make my modal responsive to mobile and tablets. As part of a wordpress plugin that i am creating as an exercise see link here.

This is being use temporarily on a food recipe website

But so far, I think I am close.

I have the jsfiddle link here.

But my main problem is with the CSS. I have left the comments on some things and options I tried.

#overlay:backdrop {
  /*
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  */
}
#overlay {
  visibility: hidden;
  /*
  position: absolute;
  left: 0px;
  top: 0px;
  */
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 30%;
  top: 30%;
  /*
  -webkit-transform: translate(-27%, -10%);
  transform: translate(-27%, -10%);
  */
  text-align: center;
}
#overlay div#gfb_newsletter_signup_form {
  max-width: 750px;
  min-width: 250px;
  max-height: 750px;
  min-height: 250px;
  margin: 5px auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
  position: absolute;
}
a.boxclose {
  float: right;
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 30px;
  background: #605F61;
  font-size: 17px;
  display: inline-block;
  line-height: 0px;
  /*
  padding: 11px 7px 17px 7px;
  */
  padding: 11px 8px 15px;
}
.boxclose:before {
  content: "x";
}
.gfb_ebook_img {
  display: block;
  clear: both;
  position: relative;
  /*
  top: -20px;
  left: -30px;
  */
}
#gfb_newsletter_signup_form h1 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  display: block;
  font-size: 30px;
  font-weight: bold;
  color: #333;
  padding: 0px 10px;
  text-align: center;
  /*style="margin-bottom:20px; font-size:18px;"*/
}
div#p-footer {
  padding: 15px;
  display: block !important;
  position: relative;
}

Answer 1

You won't get very far with a responsive design that uses fixed pixel widths for modals.

For example, your overlay has:

#overlay div#gfb_newsletter_signup_form {
    max-width: 750px;
    .
    .
    .
}

On a tablet or phone, which may have less than 750px screen width, it will go off the viewport.

You should use percentages instead - in your fiddle I changed the above line to

 max-width:40%;

and it fit in the jsfiddle window.

Even better, would be for you to study Media Queries and make a proper responsive design

Answer 2

You can try to change your overlay to absolutely positioned (that way you can have coordinates for the inner div). Then set top, left, right, bottom all equal to 0, and margin auto. This will center the box on any screen, assuming your dimensions are percentages. Then do the same for #gfb_newsletter_signup_form but add some height to it, perhaps a percentage that makes sense within your min and max values.

So your #overlay and #gfb_newsletter_signup_form might look something like this:

#overlay {
  visibility: hidden;

  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;

  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  text-align: center;
}


#overlay div#gfb_newsletter_signup_form {
  max-width: 750px;
  min-width: 250px;
  max-height: 750px;
  min-height: 250px;

  height: 30%;

  margin: 5px auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
  position: absolute;
}

Here's an updated fiddle https://jsfiddle.net/kzy2a6p7/16/

Answer 3

use @media screen css query to define your model at different screen width.outside this query use class with width in % or em . but all class and ids with width in px should be define inside @media query

 @media screen and (max-width: screenwithinPx) {
      //define your class and id here having with and height in px
    .class{} 
           #Ids{}
        }