Bootstrap zoom-in changes the size of my text

Question

My text changes when I zoom-in, but stays in place when I zoom-out... Not sure if this has something to do with Bootstrap itself, but here is my code: (Bootstrap 3.3.7)

/*Main*/
.section-padding{
    padding-top:100px;
    padding-bottom: 100px;
}
/*home*/
.home {
    height:100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #2e8222;
    text-align:center;
    color:white;
}

.heading {
    font-size:52px;
}
/*home quote*/
.quote {

    font-size: 50px;
}
/*about*/
.about {

    height:120vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #ff8e15;
    text-align:center;
    color:white;


}
/*abouttext*/
.abouttext {

}
/*contact*/
.contact {

    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #2a7682;
    text-align:center;
    color:white;

}
/*prijzen*/
.pricing {

    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #822127;
    text-align:center;
    color:white;

}
.prijzen {


}

<!--Home-->
<section id="home" class="home">
    <div class="container">
            <h1 class="quote">Welcome.</h1>


    </div>
</section>

<!--Section 2 : OVer mij-->
<section id="about" class="about section-padding">
    <div class="container">
        <h1 class="heading">About</h1>
        <h1 class="abouttext" >
            Welcome to our website. We are offering a custom website just for you!
            We can use bootstrap, HTML, css and javascript for your custom website.
            Just send your design and we will make the website just how you like it!
            Just tell us what you want, or give us a design. We'll make it just how you like.
        </h1>
    </div>
</section>
<!--Section 3: services-->
<section  class="contact section-padding">
    <div class="container-fluid">
        <h1 class="heading">Our services</h1>

        <!--images gallery-->
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="row">
            <div class="col-sm-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="http://placehold.it/350x150">
                        <div class="caption">
                            <p>Website #1</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="http://placehold.it/350x150">
                        <div class="caption">
                            <p>Website #3</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="http://placehold.it/350x150">
                        <div class="caption">
                            <p>Website #3</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-md-12">
                <div class="container servicetext">
                    <br>
                    <h1>We offer a selected amount of pre-made templates, but we can also make your own personal website.
                        We can also upload your site to your webserver if you prefer that. It's all up to you.
                    </h1>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pricing section-padding">
    <div class="container col-md-4">
        <div class="row">
            <h1 class="heading pricingtext"> Pricing</h1>
        </div>
        <div class="row prijzen">
            <h1 class="pricingtext"> the pricing depends on the website/template. contact us for the pricing.</h1>
        </div>

    </div>
</section>

I hope my question is clear, feel free to ask for more info if needed.

Answer 1

The text squishes together because the resolution changes, what you can do to fix this is add @media css tags where you can set up your element size...

For example

@media screen and (min-width: 480px) {
  .welcomeDiv {
      min-height: 1000px;
      margin-bottom: 50px;
  }
  .aboutDiv{
      min-height: 1000px;
      margin-top: 100px;
  }
}

This should keep your text divs separated. More about @media http://www.w3schools.com/cssref/css3_pr_mediaquery.asp