title: How to fix my bootstrap boxes and make it responsive
body: <p>I am implementing my portfolio and I am using bootstrap. I have one-page website with sections with different color, I set the their size via css, and when I open the mobile version, some of the buttons are out of the sections and it is not responsible at all. Is the problem that I set up the size in px? This is my code:  <a href="https://codepen.io/shaunaa/pen/WLzmxy" rel="nofollow noreferrer">Codepen</a>,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    width: 100%;
  }
  
  body {
    font-size: 100%;
    font-family: 'Fjalla One', sans-serif;
    background-color: #1a1a1d;
    letter-spacing: 0.5em;
    font-weight: 900;
  }
  
  h1.first-section {
    font-size: 40px;
    color: #221D23;
    margin-left: 10px;
  }
  
  h1.second-section {
    font-size: 40px;
    color: #662E9B;
    margin-left: 10px;
  }
  
  h1.third-section {
    color: #0F1108;
    font-size: 40px;
    margin-left: 10px;
  }
  
  h1 {
    font-size: 40px;
    color: #9C89B8;
    padding-top: 30px;
  }
  
  p {
    font-size: 15px;
    letter-spacing: 1px !important;
    font-weight: normal !important;
  }
  
  
  /*color text animation*/
  
  p.type {
    margin-top: 50px;
    font-weight: 900;
    font-size: 3.7em;
    color: transparent;
    background-image: linear-gradient(to right, #f00, #ff0, #0f0, #00f);
    -webkit-background-clip: text;
    animation: animate 10s linear infinite;
    background-size: 1000%;
  }
  
  @keyframes animate {
    0% {
      background-position: 0% 100%;
    }
    50% {
      background-position: 100% 0%;
    }
    100% {
      background-position: 0% 100%;
    }
  }
  
  
  /*navigation*/
  
  ul.nav a:hover {
    background-color: #000 !important;
  }
  
  a {
    font-size: 1.3em;
    color: #428bca !important;
  }
  
  #about {
    height: 768px;
  }
  
  #portfolio {
    padding-top: 50px;
    height: 768px;
    background-color: #6320EE;
  }
  
  #portfolio2 {
    padding-top: 50px;
    height: 768px;
    background-color: #43BCCD;
  }
  
  #portfolio3 {
    padding-top: 50px;
    height: 768px;
    background-color: #9BC9B5;
  }
  
  #contact {
    padding-top: 50px;
    height: 768px;
    background-color: #F4F1BB;
  }
  
  .navbar-toggle {
    border: none;
    background: none;
  }
  
  
  /*@media (min-width: 768px) {
      .navbar-inverse{
          background: none;
           border: none;
       }
      }*/
  
  .navbar-inverse {
    border: none;
  }
  
  
  /*whiteline*/
  
  .video {
    margin-top: 20px;
    box-shadow: 8px 9px 77px -15px rgba(0, 0, 0, 0.63);
  }
  
  .decription-whitelines {
    margin-top: 20px;
    text-align: justify;
  }
  
  .top {
    margin-top: 10%;
  }
  
  @media only screen and (max-width: 600px) {
    .top {
      margin-top: 50px;
    }
    .video {
      width: 100%;
    }
    .arrow-down {
      display: none;
    }
  }
  
  figure {
    margin: 16px 40px !important;
  }
  
  .img-fluid {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
  }
  
  
  /*arrow down*  - https://www.youtube.com/watch?v=HisZIORbN0s*/
  
  .arrow-down {
    width: 100%;
    text-align: center;
  }
  
  .arrow-down::after {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: 3s arrow infinite ease;
    animation: 3s arrow infinite ease;
  }
  
  @-webkit-keyframes arrow {
    0%,
    100% {
      top: 50px;
    }
    50% {
      top: 80px;
    }
  }
  
  @keyframes arrow {
    0%,
    100% {
      top: 50px;
    }
    50% {
      top: 80px;
    }
  }
  
  
  /*contact form */
  
  .contact-form {
    margin-bottom: 5%;
    width: 100%;
  }
  
  .contact-form .form-control {
    border-radius: 1rem;
  }
  
  .contact-form form {
    padding: 10%;
  }
  
  .contact-form .submit {
    width: 50%;
    border: none;
    border-radius: 1rem;
    padding: 8px;
    background: #59C3C3;
    font-weight: 600;
    color: #fff;
    font-size: 15px;
  }
  
  form .submit:hover {
    background-color: #A8F9FF;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Sofi Stoyanova&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link href="style.css" rel="stylesheet" /&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
  
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" href="main/main.css"&gt;
    &lt;link rel="stylesheet" href="./node_modules/sal.js/dist/sal.css"&gt;
  
  
    &lt;link rel="stylesheet" href="main/main.css"&gt;
    &lt;link rel="stylesheet" href="./node_modules/sal.js/dist/sal.css"&gt;
  &lt;/head&gt;
  
  &lt;body data-spy="scroll" data-target=".navbar" data-offset="50"&gt;
  
    &lt;!--navigation--&gt;
  
    &lt;nav class="navbar-expand-md navbar navbar-inverse bg-inverse navbar-fixed-top"&gt;
  
      &lt;div class="container-fluid"&gt;
  
        &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarNav"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
        &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
          &lt;ul class="nav navbar-nav navbar-center"&gt;
            &lt;li&gt;&lt;a class="text-uppercase" href="#about"&gt;about&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="text-uppercase" href="#portfolio"&gt;Works&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="text-uppercase" href="#contact"&gt;contacts&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;!--about --&gt;
  
  
    &lt;div id="about" class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;!--first--&gt;
        &lt;div class="col-md-3 col-sm-3"&gt;
  
        &lt;/div&gt;
  
  
        &lt;!--second--&gt;
  
        &lt;div class="col-md-6 col-sm-6 top"&gt;
          &lt;p class="type text-center text-uppercase font-weight-bold"&gt;&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;!--third--&gt;
  
        &lt;div class="col-md-3 col-sm-3"&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!--portfolio #1--&gt;
    &lt;div id="portfolio" class="container-fluid"&gt;
      &lt;h1 class="first-section text-uppercase" data-sal-duration="1200" data-sal="slide-down" data-sal-delay="200" data-sal-easing="ease-out-bounce"&gt; #1 &lt;span style="font-size: 50px;color:#FBFFFE"&gt;Whitelines&lt;/span&gt;&lt;/h1&gt;
      &lt;div class="row" data-sal-duration="1200" data-sal="slide-up" data-sal-delay="700" data-sal-easing="ease-out-bounce"&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;iframe class="video" width="480" height="270" data-aos="fade-down" src="https://www.youtube.com/embed/Be3GKzzFFEA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
        &lt;/div&gt;
  
  
  
        &lt;div class="col-lg-6 decription-whitelines"&gt;
          &lt;h1 class=""&gt;&lt;span style="color: #FFC83D"&gt;Project Description&lt;/span&gt;&lt;/h1&gt;
          &lt;br&gt;
          &lt;p&gt;&lt;span style="color: #FBFFFE"&gt;Whitelines is a brand, producing notebooks with simple design but unique
                      technology. The papers are made with white lines and when they are scanned by Whitelineâ€™s app
                      they immediately disappeared. Our video is trying to promote in the best way the brandâ€™s product
                      and make it more desirable for the target audience, which is students â€“ university and school
                      students.&lt;/span&gt;&lt;/p&gt;
          &lt;br&gt;
          &lt;button type="button" class="btn btn-danger"&gt;Danger&lt;/button&gt;
  
        &lt;/div&gt;
  
  
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-6"&gt;&lt;/div&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;a href="#portfolio2"&gt;
            &lt;div class="arrow-down"&gt;&lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;!--portfolio #2--&gt;
    &lt;div id="portfolio2" class="container-fluid"&gt;
      &lt;h1 class="second-section text-uppercase" data-sal-duration="1200" data-sal="slide-down" data-sal-delay="200" data-sal-easing="ease-out-bounce"&gt; #2 &lt;span style="font-size: 50px;color:#F9C80E"&gt;Scovsmose&lt;/span&gt;&lt;/h1&gt;
  
      &lt;div class="row" data-sal-duration="1200" data-sal="slide-up" data-sal-delay="700" data-sal-easing="ease-out-bounce"&gt;
        &lt;div class="col-lg-6"&gt;
  
  
  
          &lt;div&gt;
            &lt;img class="img-fluid" src="img/scovsmose.png" /&gt;
          &lt;/div&gt;
  
  
  
        &lt;/div&gt;
        &lt;div class="col-lg-6 decription-whitelines"&gt;
          &lt;h1 class=""&gt;&lt;span style="color:#662E9B"&gt;Project Description&lt;/span&gt;&lt;/h1&gt;
          &lt;br&gt;
          &lt;p&gt;&lt;span style="color:white"&gt;This project was developed from scratch for my 2nd semester at university.
  
                          The project is created in a team environment.Our client was a private dental clinic that needed
                          online presence to increase the number of clients and popularity in their town. Due to high
                          demand and big competition the main development method was mixed - 5Planes Ux with Prototyping.
  
                          Due to team contract I took part through the whole process in the four fields we researched and
                          work with - Communication, Deisg, Business and Interaction.&lt;/span&gt;&lt;/p&gt;
          &lt;br&gt;
          &lt;button type="button" class="btn btn-warning"&gt;Danger&lt;/button&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-6"&gt;&lt;/div&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;a href="#portfolio3"&gt;
            &lt;div class="arrow-down"&gt;&lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;!--portfolio #3--&gt;
    &lt;div id="portfolio3" class="container-fluid"&gt;
      &lt;h1 class="third-section text-uppercase" data-sal-duration="1200" data-sal="slide-down" data-sal-delay="200" data-sal-easing="ease-out-bounce"&gt; #3 &lt;span style="font-size: 50px;color:#F9C80E"&gt;Chiropractic Clinic&lt;/span&gt;&lt;/h1&gt;
  
      &lt;div class="row" data-sal-duration="1200" data-sal="slide-up" data-sal-delay="700" data-sal-easing="ease-out-bounce"&gt;
        &lt;div class="col-lg-6"&gt;
  
  
  
          &lt;div&gt;
            &lt;img class="img-fluid" src="img/chiropractor.jpg" /&gt;
          &lt;/div&gt;
  
  
  
        &lt;/div&gt;
        &lt;div class="col-lg-6 decription-whitelines"&gt;
          &lt;h1 class=""&gt;&lt;span style="color:#662E9B"&gt;Project Description&lt;/span&gt;&lt;/h1&gt;
          &lt;br&gt;
          &lt;p&gt;&lt;span style="color:white"&gt;This project was developed from scratch for my 2nd semester at university.
      
                              The project is created in a team environment.Our client was a private dental clinic that needed
                              online presence to increase the number of clients and popularity in their town. Due to high
                              demand and big competition the main development method was mixed - 5Planes Ux with Prototyping.
      
                             &lt;/span&gt;&lt;/p&gt;
          &lt;br&gt;
          &lt;button type="button" class="btn btn-info"&gt;Danger&lt;/button&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;!--contact--&gt;
    &lt;div id="contact" class="container-fluid contact-form"&gt;
      &lt;h1 class="text-center"&gt;Feel free to contact me&lt;/h1&gt;
      &lt;form method="post" action="contact.form.php"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;input name="name" type="text" class="form-control" placeholder="Your name" value=""&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input name="email" type="text" class="form-control" placeholder="Your email" value=""&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="submit" class=" form-control submit" value="Send it to me"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;textarea name="message" class="form-control" placeholder="Your message" style="width: 100%; height: 150px;"&gt;&lt;/textarea&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  
  
    &lt;/div&gt;
  
  
  
    &lt;script src="/node_modules/sal.js/dist/sal.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      sal();
    &lt;/script&gt;
  
    &lt;script type="text/javascript" src="typed.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      var typed = new Typed(".type", {
        strings: ["This is the portfolio of mutlimedia and design student. My name is Sofie, 20 years old and currently looking for an internship in Denmark...,"],
        typeSpeed: 20,
  
        loop: false
  
      });
  
  
      //clossing burger menu on mobile devices - https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247
      $(document).on('click', '.navbar-collapse.in', function(e) {
        if ($(e.target).is('a')) {
          $(this).collapse('hide');
        }
      });
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  &lt;!--https://www.youtube.com/watch?v=GrpuvsFDrdU - color text animation --&gt;</code></pre>
  </div>
  </div>
  </p>