html page goes crazy when resizing the browser

Question

So I want to build a modal that contains 3 pages and a progress bar that changes whenever I click on a button. The problem is when I resize my browser the progress bar goes out from the modal.

Here is my code:

$( document ).ready(function() {
  $('.trigger').click(function() {
     $('.modal-wrapper').toggleClass('open');
    $('.page-wrapper').toggleClass('blur');
     return false;
  });
  $('.go').click(function () {
           $('.pg2').toggleClass('active') ;
  }) ;
  $('.gg').click(function () {
           $('.pg3').toggleClass('active') ;
  }) ;
});

var pageIndex = 1;
showPages(pageIndex);

function nextPage(n) {
  showPages(pageIndex += n);
}

function showPages(n) {
  var i;
  var pages = document.getElementsByClassName("pop");
  if (n > pages.length) {pageIndex = 1}
  if (n < 1) {pageIndex = pages.length}
  for (i = 0; i < pages.length; i++) {
      pages[i].style.display = "none";
  }

  pages[pageIndex-1].style.display = "block";

}

@import url(https://fonts.googleapis.com/css?family=Courgette|Oswald);


@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

html, body{
  width:100%;
  height:100%;
  margin:0;
}
.sent{
  font-family: Dancing Script, Georgia, Times, serif;

  font-size :35px  ;
  text-align: center;
  color:#01bce5 ;
}

.page-wrapper{
  width:100%;
  height:100%;
 background:url(http://feelgrafix.com/data/background/background-1.jpg) center no-repeat;
  background-size:cover;
}

.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

a.btn{
  width:150px;
  display:block;
  margin:-25px 0 0 -75px;
  padding:1em 0;
  position:absolute;
  top:50%; left:50%;
  font:1.125em 'Arial', sans-serif;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  color:#fff;

  background:rgba(217,67,86,1);
}
a.go{
  width:150px;
  display:block;
  margin:-25px 0 0 -75px;
  padding:1em 0;
  position:absolute;
  top:60%; left:80%;
  font:1.125em 'Arial', sans-serif;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:rgba(217,67,86,1);
}
a.gg{
  width:200px;
  height: 10px;
  display:block;
  margin:-25px 0 0 -250px;
  padding:1em 0;
  position:absolute;
  top:70%; left:80%;
  font:1.125em 'Arial', sans-serif;
  font-weight:400;
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:rgba(217,67,86,1);
}
.modal-wrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
  background:rgba(255,257,153,0.75);
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
  list-style-position: inside;

}

.modal-wrapper.open{
  opacity:1;
  visibility:visible;
  overflow: hidden;
  list-style-position: inside;
}

.modal{
  width:600px;
  height:600px;
  display:block;
  margin:50% 0 0 -300px;
  position:relative;
  top:40%; left:50%;
  background:#fff;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
word-break:break-all;
}

.modal-wrapper.open .modal{
  margin-top:-200px;
  opacity:1;
}

.head{
  width:90%;
  height:32px;
  padding:1.5em 5%;
  overflow:hidden;
  background:#01bce5;
}

.btn-close{
  width:32px;
  height:32px;
  display:block;
  float:right;
}

.btn-close::before, .btn-close::after{
  content:'';
  width:32px;
  height:6px;
  display:block;
  background:#fff;
}

.btn-close::before{
  margin-top:12px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.btn-close::after{
  margin-top:-6px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.content{
  padding:5%;
}
.flat-button {
  position: relative;
  width: 150px; height: 60px;
  background: #E74C3C;
  margin: 0 auto;
  margin-top: 40px;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  transition: color .3s;
  /* Typo */
  line-height: 60px;
  text-align: center;
  color: #fff;
}

.flat-button:after {
  position: absolute;
  top: 90%; left: 0;
  width: 100%; height: 100%;
  background: #C0392B;
  content: "";
  z-index: -2;
  transition: transform .3s;
}

.flat-button:hover::after {
  transform: translateY(-80%);
  transition: transform .3s;
}

.round-image{
  border-radius:100%;
 height: 280px;
 margin: 0 auto;
 overflow:hidden;
 width: 280px;
}

.descrip{
  padding:1em 0;
  position:absolute;
  top:40%;
  left:70%;
  font:1.125em 'Arial', sans-serif;

  text-align:center;
  text-decoration:none;
  margin:-25px 0 0 -75px;

}
.progressbar {
      counter-reset: step;
  }
  .progressbar li {
      list-style-type: none;
      width: 15%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
        left:350px;
        height: 10px;


  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 5px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 200px auto 10px auto;
      border-radius: 50%;


  }
  .progressbar li:after {
      width: 100%;
      height: 7px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 215px;
      left: -50%;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #01bce5;
  }
  .progressbar li.active + li:after {
      background-color: #01bce5;
  }
.titre{
   text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./main.css">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http:////fonts.googleapis.com/css?family=Dancing+Script">


    <title></title>
  </head>
  <body>
    <div class="page-wrapper">
  <a class="btn trigger" href="javascript:;">Popup!</a>
</div>
<div class="modal-wrapper">
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="javascript:;"></a>

    </div>
    <div class="content">
      <div class="container">
          <div class="pop fade">
              <div class="text">
                     <h1 class='sent'>FIRST PAGE  </h1>
              </div>


               <img src="http://i.imgur.com/2ZgHKbQ.jpg" alt="Beach in your dream" class="round-image" >


               <p class='descrip'>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
             <a class="btn go" href='javascript:;' onclick='nextPage(1);'>GO!</a>




          </div>
          <div class="pop fade">
              <div class="text">
                     <h3 class="titre">Lorem ipsum dolor sit amet</h3>
              </div>

          <a class="btn gg" href='javascript:;' onclick='nextPage(1);'>GO!</a>
          </div>
          <div class="pop fade">
              <div class="text">
                     <h1 class='sent'>Inscription</h1>
              </div>


          </div>

      </div>
    </div>
  </div>
  <ul class="progressbar">
     <li class="active"></li>
     <li class='pg2'></li>
     <li class="pg3"></li>
  </ul>
</div>
  </body>
  <script  src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">  </script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
  <script src="./index.js" type="text/javascript"></script>

</html>

Answer 1

In your HTML code add

<div style="clear:both"></div>

before

<ul class="progressbar">
     <li class="active"></li>
     <li class='pg2'></li>
     <li class="pg3"></li>
  </ul>

Then change left:350px to left:x%.

.progressbar li {
      list-style-type: none;
      width: 15%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
        left:20%;
        height: 10px;
  }

if you want your design work for every size of browser then making different css for different display size must help you. use following meta tag in head of your code

<meta name="viewport" content="width=device-width, initial-scale=1">

then import two css using media query

<link rel="stylesheet" media="screen and (max-width:768px)" type="text/css" href="./mobile.css">
<link rel="stylesheet" media="screen and (min-width:769px)" type="text/css" href="./desktop.css"> 

if your browser screen resolution is less than 768px browser will render mobile.css if resolution is more than 768 browser will render destop.css you can check your browser css here. check resolution for different screen size will clear you more.

Learn more about responsive web design here

Note now most of modern browser support % as input for size elements like width margin height etc use this instead of px will also help you to make html more responsive for more device and screen size.

FYI, you can also use internal media query for css like

body
{
 width: 75%;
}
@media only screen and (max-width: 500px) {
    body {
        width: 91.66%;
    }
} 

Answer 2

I think your issue is here:

  .progressbar li {
      list-style-type: none;
      width: 15%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
      left:350px;
      height: 10px;
  }

The left:350px; property is hardcoding a value that is pushing the progress bar to the right... I would recommend to use a percentage. Also the list that creates the progress bar is outside of the modal view. Maybe would be better that is inside.

Finally if you are testing responsive design add this meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your head. It will help your site when it renders on mobile devices