We Keep Coding

Overlapping images before refresh / on some browsers [duplicate]

I'm sorry for dropping so much code here, but I've been playing with this for over a week and I just can't figure it out.
So I am working on my personal website, and the problem is that the images in the the body's grid system overlap sometimes on the first load of the site. If you refresh it, it seems to work ok (most of the time). You can try yourself: tylerteacher.com . The strange thing is that the site works in the compatibility viewers in chrome and firefox.
I have tried adding margins and using the 'space-between' function in the css. I have double checked the html to make sure everything is properly linked to the css page, and I have also played with Javascript page and the slides per view functions.
I really appreciate the help!
let toggle = document.querySelector("#header .toggle-button");
let collapse = document.querySelectorAll("#header .collapse");
toggle.addEventListener('click' , function(){
collapse.forEach(col => col.classList.toggle("collapse-toggle"));
})
// with masonry
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// swiper libray initialization
new Swiper('.swiper-container', {
direction : 'horizontal',
loop : true,
slidesPerView : 6,
autoplay : {
delay : 0
},
// responsive breakpoints
breakpoints : {
'#0' : {
slidesPerView : 2
},
// 888px
'#1.00' : {
slidesPerView : 3
},
// 1110px
'#1.25' : {
slidesPerView : 4
},
// 1330px
'#1.50' : {
slidesPerView: 5
}
}
})
// Sticky Navigation
window.onscroll = function(){ myFunction()};
// get the current value
let navbar = document.getElementById("header");
// get the navbar position
let sticky = navbar.offsetTop;
// sticky function
function myFunction(){
if(window.pageYOffset >= sticky){
navbar.classList.add("sticky");
}else{
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins&family=Roboto&display=swap');
/* root styling */
:root{
--light : #f8f9fa;
--secondary: #adb5bd;
--dark: #343a40;
--primary-color: #f15bb5;
--secondary-color: #2ec4b6;
--border : #e9ecef;
}
body{
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
* > *{
box-sizing: border-box;
}
/* global styling */
.text-light{
color: var(--light);
}
.text-secondary{
color: var(--secondary);
}
.text-dark{
color: var(--dark);
}
.text-primary{
color: var(--primary-color);
}
.bg-light{
background-color: var(--light);
}
.container{
max-width: 1200px;
padding: 0 15px;
margin: auto;
}
.img-fluid{
width: 100%;
}
.text-title{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
}
.secondary-title{
font-family: 'Poppins' , sans-serif;
}
.display-1{
font-size: 22px;
}
.display-2{
font-size: 16px;
}
.display-3{
font-size: 14px;
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.btn{
padding: 15px 20px;
border: none;
}
.btn-primary{
border-radius: 4px;
background-color: var(--secondary-color);
}
.object-fit{
max-height: 120px;
height: 80px;
width: 80px;
object-fit: fill;
justify-content: space-between;
}
.d-flex{
display: flex;
}
.flex-wrap{
flex-wrap: wrap;
}
.justify-content-center{
justify-content: center;
}
.justify-content-between{
justify-content: space-between;
}
.mt-2{
margin-top: 10px;
}
.mt-3{
margin-top: 50px;
}
.mb-3{
margin-bottom: 30px;
}
.m-0{
margin: 0;
}
.px-1{
padding-left: 5px;
padding-right: 5px;
}
.px-2{
padding-left: 20px;
padding-right: 20px;
}
.py-1{
padding-top: 10px;
padding-bottom: 10px;
}
.py-2{
padding-top: 20px;
padding-bottom: 20px;
}
.py-3{
padding-top: 30px;
padding-bottom: 30px;
}
.thumbnail{
width: 100%;
height: 500px;
object-fit: cover;
}
.rounded{
height: 120px;
width: 120px;
object-fit: fill;
border-radius: 99px;
}
.shadow{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
/* section styling */
/* ------- Navigation Menu ---------- */
.navbar{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
.nav-brand{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
align-self: center;
font-size: 32px;
}
.collapse{
align-self: center;
}
.nav-link{
font-size: 18px;
margin: 12px;
color: var(--dark);
font-family: 'Poppins', sans-serif;
}
.nav-link:hover{
color: var(--primary-color);
}
.search-box{
display: inline;
border-right: 1px solid var(--secondary);
padding-right: 12px;
margin-right: 10px;
}
.toggle-button{
font-size: 21px;
background-color: transparent;
border: none;
position: absolute;
right: 0;
margin: 8px 10px;
display: none;
}
.toggle-button:focus{
outline: none;
}
/* ------- .Navigation Menu ---------- */
/* ----------- Main Section ---------- */
#site-main{
margin-top: 4em;
}
#posts{
margin-bottom: 5em;
}
.grid{
margin: 1 auto;
row-gap: 20px;
}
.grid .grid-item{
width: calc(33.3333% - 20px);
margin-bottom: 3em;
}
/* ----------- .Main Section ---------- */
/* ----------- sticky ------- */
.sticky{
position: fixed;
top: 0;
z-index: 99;
width: 100%;
}
.sticky + .content{
padding-top: 60px;
}
/* ----------- .sticky ------- */
/* Media Query */
.row{
display: flex;
}
.col-3{
flex: 0 0 33.3333%;
max-width: 33.3333%;
padding-right: 35px;
}
.col-8{
flex: 0 0 70%;
max-width: 70%;
}
.col-4{
flex: 0 0 30%;
max-width: 30%;
}
#media (max-width : 1024px){
.row{
flex-wrap: wrap;
}
.col-3{
flex: 0 0 50%;
max-width: 50%;
}
.col-8{
flex: 0 0 100%;
max-width: 100%;
}
.col-4{
flex: 0 0 100%;
max-width: 100%;
}
}
#media (max-width : 992px){
.navbar{
flex-direction: column;
}
#site-main{
margin-top: 14em;
}
}
#media (max-width : 768px){
.grid .grid-item{
width: calc(50% - 20px);
border-top: 1px solid #dfdfdf;
}
.col-3{
flex: 0 0 100%;
max-width: calc(100% - 50px);
padding-top: 40px;
}
}
#media (max-width : 574px){
.toggle-button{
display: initial;
}
.collapse{
max-height: 0;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.51,-0.15, 0, 0.98);
}
.collapse .nav-link{
display: block;
text-align: center;
}
.search-box{
border-right: none;
}
.collapse-toggle{
max-height: 500px;
}
.grid .grid-item{
width: calc(100% - 20px);
border-top: 1px solid #dfdfdf;
}
#site-main{
margin-top: 6em;
justify-content: space-around;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TylerTeacher</title>
<!-- font awesome icons cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous" />
<!-- swiper slider css file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css"
integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA=="
crossorigin="anonymous" />
<!-- custom style.css file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header id="header" class="shadow bg-light">
<nav class="container navbar">
<a href="/index.html" class="nav-brand text-dark">
TylerTeacher
</a>
<!-- toggle button -->
<button class="toggle-button">
<span><i class="fas fa-bars"></i></span>
</button>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
Home
Resources
Classes
Testimonials
Contact
</ul>
</div>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
<div class="search-box">
<i class="fas fa-search"></i>
</div>
<i class="fab fa-facebook-f"></i>
<a href="#" class="https://www.youtube.com/channel/UCDN9p8e-UAaPxtzfoVJnLMw"><i
class="fab fa-youtube"></i></a>
<a href="https://www.instagram.com/tyler.s.teacher/" class="nav-link"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-tiktok"></i>
</ul>
</div>
</nav>
</header>
<!-- .Header -->
<!--main site-->
<main id="site-main">
<!-- Blog Post Section -->
<section id="posts">
<div class="container">
<div class="grid">
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Welcome to TylerTeacher.com
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around; ">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/grandmother-1822560_960_720.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Why online education is the future
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to overcome language anxiety
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/laptop-red-cup-coffee-notebook-pen-satchel-freephotoscc-thumb-2.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Podcasts are a great tool for language learners
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/man_studying_online.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
What makes some people better at learning languages?
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/negative-space-picnic-city-river-sunset-ben-duchac-thumb-1.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Tips for becoming a more confident communicator in English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/listen-1702648_960_720.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How listening can make you better at speaking English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/Man_studying.jpg" class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to use online classes effectively
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/education_tiles.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Coming soon
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
</div>
<div class="text-center">
<button class="btn btn-primary secondary-title text-light">Load More Posts...</button>
</div>
</div>
</section>
<!-- .Blog Post Section -->
<!-- masonry libray for horizontal grid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
crossorigin="anonymous"></script>
<!-- swiper slider cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"
integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA=="
crossorigin="anonymous"></script>
<!-- custom javascript main.js file -->
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>

It is caused by the Masonry. You have to let the page finish loading before you initialize it. This worked for me
window.addEventListener('load', function(){
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// remove preload if added
});
Optional: Whiles the page loads, you can add a preloader to hide the page's disorganised stucture.

What you're experiencing is due to the Masonry script calculating the dimensions of the grid based on its content. While loading the page your images don't have a width and height because the browser doesn't know what they look like. Masonry doesn't wait and will render your grid anyway.
A fix for this is to let the browser know in advance what the dimensions of the image will be. You can do this by adding a width and height attribute to your img tag containing the width and height in pixels.
<img src="your-image.jpg" class="img-fluid" width="480" height="720" alt="" />
Alternatively you could wait for all images in your grid to load before initializing the Masonry script.
// Loads a single image.
const loadImage = src => new Promise(resolve => {
const image = new Image();
image.onload = () => resolve();
image.src = src;
});
// Get the container with all images.
// Loop over each image and wait for all of them to load.
async function allImagesLoaded(selector) {
const container = document.querySelector(selector);
if (container === null) {
return;
}
const images = container.querySelectorAll('img');
return Promise.all([...images].map(
src => loadImage(src)
));
}
// Load all images inside #posts .grid.
allImagesLoaded('#posts .grid').then(() => {
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
});

Having trouble with Bootstrap

I've recently started using bootstrap to make a website functioning for both computer and mobile phones/tablets.
While it scales everything nicely in the browser, when I resize my browser window, some words disappear in my interface.
How can I make it so that my text doesn't disappear and stay in their respective rectangles?
I'm running this webpage on a Siemens S7-1200 PLC. I have made a json file that fetches data from the PLC which I represent on my website. When I try it on my phone however, some of the text disappears.
The following Image represents how my page looks like on a web browser on my laptop:
When I resize my browser it looks like the following:
Notice the arrow I've added, the arrow points towards the '1' that is next to the text that says 'Mixer 1'.
Excuse my english, it's not my mother tongue.
My HTML code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col" id="ovznormaal">Normaal</div>
<div class="col" id="ovzengsave">Energy Save</div>
<div class="col" id="ovzhyg">Hygieniseren</div>
<div class="col" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col" id="mix1">Mixer 1</div>
<div class="col" id="mix2">Mixer 2 (EC100)</div>
<div class="col" id="ventil">Ventilator</div>
<div class="col" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col">Product Temperatuur</div>
<div class="col"><p id="prodTemp">000.0 C</p></div>
<div class="col">Mat 1 Temperatuur</div>
<div class="col"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col">Mat 2 Temperatuur</div>
<div class="col"><p id="m2temp">000.0 C</p></div>
<div class="col">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col">Verwarming Matten</div>
<div id="mt1" class="col">Mat 1</div>
<div id="mt2" class="col">Mat 2</div>
<div id="mt3"class="col">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col">Programma Keuze</div>
<div id="kort" class="col"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col">Operationele stand</div>
<div class="col">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript" src="js/custom/main.js"></script>
</body>
</html>
My CSS:
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
I hope someone can give my some tips, I'm kind of a beginner to CSS/HTML/JS.

Your <DIV> text is wrapping into the box below it, add white-space: nowrap to your CSS for the DIVs under .col {} and .col-pixel-width-100 {}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
white-space: nowrap;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
white-space: nowrap;
}

You could also try adding the "text-nowrap" class. That is a bootsrtap class that will essentially do the same as what Bob Dole has suggested above

you can simply provide a new class to all the required columns. Here i have edited the code for you
HTML PART
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col newclass" id="ovznormaal">Normaal</div>
<div class="col newclass" id="ovzengsave">Energy Save</div>
<div class="col newclass" id="ovzhyg">Hygieniseren</div>
<div class="col newclass" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col newclass" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col newclass" id="mix1">Mixer 1</div>
<div class="col newclass" id="mix2">Mixer 2 (EC100)</div>
<div class="col newclass" id="ventil">Ventilator</div>
<div class="col newclass" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col newclass">Product Temperatuur</div>
<div class="col newclass"><p id="prodTemp">000.0 C</p></div>
<div class="col newclass">Mat 1 Temperatuur</div>
<div class="col newclass"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col newclass">Mat 2 Temperatuur</div>
<div class="col newclass"><p id="m2temp">000.0 C</p></div>
<div class="col newclass">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col newclass">Verwarming Matten</div>
<div id="mt1" class="col newclass">Mat 1</div>
<div id="mt2" class="col newclass">Mat 2</div>
<div id="mt3"class="col newclass">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col newclass">Programma Keuze</div>
<div id="kort" class="col newclass"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col newclass"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col newclass">Operationele stand</div>
<div class="col newclass">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS PART
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
.newclass {
min-width: 300px;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
PS I have added a new class named "newclass" and provided a min width....please change the min-width as you like

I think your issue lies with using line-height as a vertical align, as when the text wraps, it wraps with 98px of line-height.
I would start by removing it and re-aligning it with padding etc.

Bootstrap 4 losing content with fullPage.js

Well basically my problem is that when I'm scrolling down when using the fullPage.js, I loose the content of my 'Section0, I don't know if it is the lack of sleep but I can't find the problem, I'm linking the codepen so you can try it live, thanks in advance!
<div id="fullpage">
<div class="section fp-auto-height" id="section0">
<!-- Fin del menú de navegación -->
<div class="banner">
<div class="container">
<div class="intro">
<h1 class="jumbotitle">BRAND LOGO</h1>
<p class="jumboparr">¡Some text for information!</p>
</div>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide sd1" id="slide1">
<div class="container">
<div class="row justify-content-center">
<p class="sdp1">More info bla bla blaa </p>
<p class="sdp1">The same info different color</p>
</div>
</div>
</div>
<div class="slide sd2" id="slide2">
<div class="container">
<div class="row justify-content-center">
<p class="sdp2">¡Moooore infoooo lorem impsum! </p>
</div>
</div>
</div>
</div>
</div>
Codepen

I think the problem is .banner {height:800px;}. If you change it, for example, in height:100vh you can see your content.
https://codepen.io/anon/pen/mjdPpz
.navbar{
background: black !important;
}
#header, #footer {
position:fixed;
display:block;
width: 100%;
z-index:9;
}
#header {
top:0px;
}
.banner {
height: 100vh;
width: 100%;
background-image: url("https://cdnb.artstation.com/p/assets/images/images/009/439/993/large/brody-bellon-background-space-sm.jpg?1519023411") !important;
background-size: cover;
z-index: -1;
}
.navbar-brand {
font-family: 'Francois One', sans-serif;
font-size: 30px;
font-weight: bold;
color: white !important;
}
.navbar-nav {
font-family: 'Francois One', sans-serif;
font-size: 25px;
text-align: right;
color: white !important;
}
.nav-link {
color: white !important;
}
.nl1:hover {
color: #9933ff !important;
font-family: 'Monoton', cursive !important;
}
.nl2:hover {
color: #ffcc00 !important;
font-family: 'Monoton', cursive !important;
}
.sd1 {
background-color: #ffcc00;
}
.sd2 {
background-color: #9933ff;
}
.sdp1 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
color: black;
}
.sdp2 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
color: white;
}
.jumbotitle {
font-family: 'Francois One', sans-serif;
font-size: 130px;
text-align: center;
color: white;
}
.jumboparr {
font-family: 'Oswald', sans-serif;
font-size: 40px;
text-align: center;
color: white;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href="https://fonts.googleapis.com/css?family=Acme|Fjalla+One|Francois+One|Oswald|Monoton" rel="stylesheet">
<!-- Scroll Plugin de fullpage.js -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.css">
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.js"></script>
<title>TEST</title>
</head>
<body>
<div id="header">
<!-- Menú de navegación -->
<div class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">BRAND TEST</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link nl2" href="home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link nl1" href="#">Galeria</a>
</li>
<li class="nav-item">
<a class="nav-link nl2" href="#">Noticias</a>
</li>
<li class="nav-item">
<a class="nav-link nl1" href="#">Equipo</a>
</li>
<li class="nav-item">
<a class="nav-link nl2" href="#">Contacto</a>
</li>
</ul>
</div>
</div>
</div>
<div id="fullpage">
<div class="section fp-auto-height" id="section0">
<!-- Fin del menú de navegación -->
<div class="banner">
<div class="container">
<div class="intro">
<h1 class="jumbotitle">BRAND LOGO</h1>
<p class="jumboparr">¡Some text for information!</p>
</div>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide sd1" id="slide1">
<div class="container">
<div class="row justify-content-center">
<p class="sdp1">More info bla bla blaa </p>
<p class="sdp1">The same info different color</p>
</div>
</div>
</div>
<div class="slide sd2" id="slide2">
<div class="container">
<div class="row justify-content-center">
<p class="sdp2">¡Moooore infoooo lorem impsum! </p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage'],
sectionsColor: ['#ffcc00', '#9933ff'],
fixedElements: '#header'
});
</script>
</body>
</html>

You should need to remove "fp-auto-height" class from section0.

Center Bootstrap Carousel with 3+ Boxes

I want to be able to have a carousel with the div's inside centered with a stroller.
Here are the images:
This is what I currently have:
I would love to center those two boxes within the arrows:
I want the arrows to slide between the three boxes: Right arrow: From 2 -> 3 -> 1 etc.
Here is the code:
$('#carousel-example-generic').carousel({
wrap: true,
interval: false
});
.carousel.slide img {
width: 100%;
height: auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left,
.carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {
margin-left: -45px;
color: black;
}
.carousel-control.right {
margin-right: -45px;
color: black;
}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 290px;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 290px;
margin-right: 60px;
background-color: #4B92DB;
float: right;
clear: none;
}
.bottomRightBox {
height: 170px;
width: 310px;
}
.row img {
padding-bottom: 5px;
}
#topLeftColumn {
padding-right: 30px;
}
#bottomLeftColumn {
padding-left: 0px;
}
#bottomRightColumn {
padding-right: 0px;
}
#bottomContactsRow {
display: inline-flex;
}
<div class="col-sm-8">
<h4>Latest Training Documentation</h4>
<hr style="margin-top: 10px;" />
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" class="active"></li>
<!-- data-slide-to="0" -->
<!-- UPDATE ON 3+ SLIDES -->
<!-- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li> -->
</ol>
<div class="carousel-inner">
<!-- Slide -->
<div class="item active">
<div class="row">
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 60px!important; padding-bottom: 5px; padding-right: 6px; vertical-align: middle;" />OneDrive</h2>
<p id="innerBoxText">Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</a>
</div>
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/delveLogo.png" style="height: 50px!important; width: 50px!important; padding-bottom: 5px; padding-right: 8px; vertical-align: middle;" />Delve</h2>
<p id="innerBoxText">It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</a>
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>

Now you have it
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel.slide img {
width:100%;
height:auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left, .carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {color: black;}
.carousel-control.right {color: black;}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 95%;
margin-left: 5%;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 95%;
margin-right: 5%;
background-color: #4B92DB;
float: right;
clear: none;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 70%;
height: 200px;
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second of second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third of third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>

iPad and iPhone not scrolling to anchored div

I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!