Bootstrap - Content Small on Phone - html

Question

I am making a website for a project. I am having some issues making it "compatible" with any kind of phone, in the sense that everything that is on the website is extremely small, and some of the things have to be zoomed in on to read what it says.
This is my current code:
body, html {
overflow-x: hidden;
font-family: 'Montserrat', sans-serif;
}
#author__image {
width: 125px;
height: 125px;
border-radius: 50%;
border: 5px solid white;
margin-bottom: 10px;
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: .5s;
}
#profile__name {
font-family: 'Montserrat', sans-serif;
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: .8s;
}
#profile__asset {
color: #CCCCCC;
text-align: center;
font-family: 'Hind', sans-serif;
font-size: 18px;
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: 1.1s;
}
.header img {
margin-top: 35vh;
}
.profile__links {
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: 1.4s;
}
button {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 18px;
margin: 15px 5px 5px 5px;
background: white;
border: none;
cursor: pointer;
}
#twitter {
color: #55acee;
background: white;
border: white 2px solid;
}
#linkedin {
color: #007cb7;
background: white;
border: white 2px solid;
}
#github {
color: #333333;
background: white;
border: white 2px solid;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Hind:300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Test Website</title>
<div class="fluid-container">
<div class="row">
<section class="module parallax parallax-1">
<div class="container header">
<div class="col-12 text-center">
<img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg">
</div>
<div class="col-12">
<h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1>
</div>
<div class="col-12">
<p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p>
</div>
<div class="col-12 text-center animated fadeIn profile__links">
<button id="twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</button>
<button id="linkedin">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</button>
<button id="github">
<i class="fa fa-github" aria-hidden="true"></i>
</button>
<button id="email">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</button>
</div>
</div>
</section>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.js"></script>

Answer 1

You need to add a meta tag in the head tag of your HTML.
<meta name="viewport" content="width=device-width, initial-scale=1">
You'll probably want this in your CSS as well:
#-ms-viewport{
width: device-width;
}

Answer 2

You should have something similar to class="col-sm-12" instead of class="col-12". Check out w3 schools bootstrap: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Answer 3

You should correct the class:fluid-container with container-fluid
That is at least the first error

Answer 4

You also need to wrap cols inside the row class. Take a look at this edited code:
<div class="container-fluid">
<div class="row">
<section class="module parallax parallax-1">
<div class="container header">
<div class="row">
<div class="col-md-12 text-center">
<img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg">
</div>
<div class="col-md-12">
<h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1>
</div>
<div class="col-md-12">
<p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p>
</div>
<div class="col-md-12 text-center animated fadeIn profile__links">
<button id="twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</button>
<button id="linkedin">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</button>
<button id="github">
<i class="fa fa-github" aria-hidden="true"></i>
</button>
<button id="email">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</section>
</div>