Bootstrap 4 - Rows overlapping when reaching mobile screen size

Bootstrap 4 - Rows overlapping when reaching mobile screen size - html

My current problem is that rows are overlapping each other when the screen is shrinked (responsive). I've tried adding containers without success. Also, I've noticed that rows are not "pushing" the content below them when in mobile screen sizes... What am I doing wrong here?
Everything looks very well on desktop and tablet, but once I reach mobile screen sizes it gets hairy.
Here's the live code: Codepen - Bootstrap rows overlapping
Here's my current HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" />
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
Any guidence would be helpful!

Change height from vh to %
.v-align{
height:30%;
}
#import url('https://fonts.googleapis.com/css?family=Maven+Pro|Roboto');
body {
background-color: ;
padding-top: 70px;
}
#full-h {
height: 100%;
width: 100%;
}
.txt-wrap {
word-wrap: break-word;
}
.v-align {
height: 30%;
}
.v-align2 {
height: 40%;
}
.fl-row {
background-color: #314d74;
}
.f-row {
margin-top: 6vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.s-row {
background-color: #b3bdc7;
}
.s-row-box {
padding: 5vh;
text-align: center;
}
.t-row {
background-color: #697fa4;
}
h1 {
color: #FFE082;
text-align: center;
margin-top: 2vh;
}
h2 {
border-left: 4px solid #FFB300;
}
.sol-icons {
font-size: 72px;
}
.sol-icons-cap {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.form-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact.s-row-box {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 576px) {
/* ... */
}
#media (min-width: 768px) {
/* ... */
}
/****** Canvas Animation ******/
/***** Animation CSS Code *****/
.project-title--container,
.project-link--container {
width: 100%;
text-align: center;
}
.project-title,
.project-link {
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.project-title {
font-size: 18px;
margin-top: 10px;
}
.project-link,
.project-link a {
color: #fff;
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
.fa {
font-size: 22px !important;
padding: 0 5px;
color: #fff;
}
.container-animation--flexbox {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.animationItem {
position: absolute;
margin-right: 35px;
}
#animationItem-image--bigCloud {
animation: bobble 2s infinite;
margin-top: 3vh;
margin-left: 12vh;
font-size: 170px;
color: #7ec0ee;
}
#animationItem-image--smallCloud {
animation: bobble 4s infinite;
margin-top: 12vh;
margin-left: 20vh;
font-size: 145px;
color: #e9e9e9;
}
.smallCloud-two {
margin-bottom: 5px;
margin-right: 320px;
font-size: 145px;
z-index: -1;
color: #d9d9d9 !important;
animation: bobble 2.5s infinite !important;
}
#keyframes bobble {
0% {
transform: translate3d(0px, -25px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(0px, -35px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(0px, -25px, 0px);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Network Technology</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" /> TEST WEB
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud1" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
</html>

Related

Position image to the right of content using css/bootstrap

I am trying to position an image to the right of the content area as shown in this dribble shot.
https://dribbble.com/shots/15571736-Money-Transfer-Website
Here is what I have so far.
https://codepen.io/pinapelkod/pen/RwLJJNm
.content {
position: relative;
}
.bg-image {
position: relative;
top: 350px;
left: 450px;
height: 350px;
z-index: 2;
}
When I float the image or position using top and left properties, the layout gets distorted.

By updating the bg-image class style I got the following result. If there is a different problem, specify it more clearly.
body {
background-color: white;
color: #1d2331;
}
.bg-image {
float: right !important;
width: 100%;
position: relative;
height: auto;
margin-right: -40% !important;
}
a.nav-link,
a.navbar-brand {
color: #1d2331;
}
a i {
color: #c9327b;
}
form .btn {
background-color: #1d2331;
color: #f3f1fe;
}
.action-call {
min-height: 35vh;
}
.feature {
background-color: #f3f1fe;
min-height: 56vh;
}
.feature .icon-link {
text-decoration: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-md mt-4">
<div class="container-fluid mx-5">
<a class="navbar-brand" href=""> <i class="bi bi-app-indicator me-2"></i> <strong>Fincy App</strong></a>
<div class="vr ms-0"></div>
<div class="dropdown">
<button class="btn dropdown-toggle" type=" button" id="personalbtn" data-bs-toggle="dropdown"
aria-expanded="false"><strong>Personal</strong></button>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item me-4">
<a class="nav-link" href="#"><strong>Download</strong></a>
</li>
<li class="nav-item me-4"><a class="nav-link" href="#"> <strong>Plans</strong></a></li>
<li class="nav-item me-4"><a class="nav-link dropdown-toggle" href="#"> <strong>Product </strong></a>
</li>
</ul>
<form class="ms-5">
<button class="btn btn-outline-success px-5" type="submit">Login</button>
</form>
</div>
</nav>
</header>
<article class="content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
<section class="mx-5 action-call d-flex align-items-center ">
<div class="container-fluid">
<div class="row t-row">
<h1> <strong>Send money <br>abroad more faster</strong></h1>
<div class="sendnow"></div>
</div>
</div>
</section>
<section class="feature d-flex align-items-center">
<div class="container-fluid">
<div class="mx-5 row b-row">
<div class="d-flex justify-content-start">
<div class="col-3 me-3">
<i class="fs-2 bi bi-shield-shaded"></i>
<h5> <strong>Safety guarantee</strong></h5>
<p>We make sure your money will <br>be safe 100% guarantee</p>
<a href="#" class="icon-link"> <strong>Read more</strong><i class="bi bi-chevron-right text-primary"></i>
</a>
</div>
<div class="col-3 me-3">
<i class="fs-2 bi bi-credit-card-2-front-fill"></i>
<h5> <strong>Send money in minutes</strong></h5>
<p>Your money will be sent faster <br>than your blue wallet</p>
<a href="#" class="icon-link"> <strong>Send money now</strong><i
class="bi bi-chevron-right text-primary"></i> </a>
</div>
</div>
</div>
</div>
</section>
</article>

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>

I restructured the html and added a bootstrap display (d-flex) class as shown below.
Update HTML structure:
<div class="d-flex mt-5">
<div class="col-3 ">
.....
</div>
<div class="col-3">
.....
</div>
<div class="col-6 content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
</div>
</div>
The corresponding CSS:
.content {
position: relative;
}
.bg-image {
position: relative;
top: -310px;
left: 160px;
height: 500px;
}
Link to codepen:
https://codepen.io/pinapelkod/pen/RwLJJNm

Page has weird little white spacing on the right side

My whole page has weird white spacing on the right side of it and I can't tell where it is coming from.
I tried to reset the padding and margin, but clearly it hasn't helped.
It's my first time using bootstrap and I am guessing it might be something with it, but I seems like bootstrap by default has nothing like it and all I've used was basically col-x stuff.
style.css
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700");
html,
body {
height: 100%;
width: 100%;
font-family: "Poppins", sans-serif;
color: #222;
padding: 0;
margin: 0;
}
/*--Navigation--*/
.navbar {
padding: 0.8rem;
}
.navbar-nav li {
padding-right: 20px;
}
.nav-link {
font-size: 1.1em !important;
color: #f7f7f7;
}
.nav-link:hover {
color: #f7f7f7;
}
.bg-blue {
background-color: #12232e;
border-bottom: 3px solid #007cc7;
}
.navbar-brand h1 {
color: #f7f7f7;
}
.navbar-brand h1:hover {
color: #f7f7f7;
text-decoration: none;
}
.navbar .navbar-nav .nav-link {
position: relative;
color: #f7f7f7;
}
.navbar .navbar-nav .nav-link::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #f7f7f7;
color: #f7f7f7;
width: 0%;
content: "";
height: 3px;
transition: all 0.5s;
}
.navbar .navbar-nav .nav-link:hover::after {
width: 100%;
color: #f7f7f7;
}
.navbar .navbar-nav .nav-link:active {
width: 100%;
color: #f7f7f7;
}
.nav-item {
font-size: 130%;
}
.custom-toggler.navbar-toggler {
border-color: rgb(247, 247, 247);
}
.navButton {
float: right;
width: 45%;
height: 35%;
}
/*--Navigation--*/
/*--Slider--*/
.carousel-inner img {
width: 100%;
height: 100%;
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-caption h1 {
font-size: 500%;
text-transform: uppercase;
text-shadow: 1px 1px 10px #000;
}
.carousel-caption h3 {
font-size: 200%;
font-weight: 500;
text-shadow: 1px 1px 10px #000;
padding-bottom: 1rem;
}
/*--Slider--*/
/*--Jumbotron/Welcome--*/
.lead {
font-size: 145%;
}
/*--Jumbotron/Welcome--*/
/*--footer--*/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
}
hr.light {
border-top: 1px solid #d6d6d6;
width: 75%;
}
/*--footer--*/
/*---Media Queries --*/
#media (max-width: 1162px) {
.carousel-caption h1 {
font-size: 350%;
}
}
#media (max-width: 768px) {
.carousel-caption {
top: 45%;
}
.carousel-caption h1 {
font-size: 250%;
}
.carousel-caption h3 {
font-size: 140%;
font-weight: 500;
padding-bottom: 0.2rem;
}
.carousel-caption .btn {
font-size: 95%;
padding: 8px 14px;
}
.display-4 {
font-size: 200%;
}
.navButton {
float: right;
width: 50%;
}
.navbar-toggler {
float: right;
}
}
#media (max-width: 576px) {
.carousel-caption {
font-size: 70%;
top: 40%;
}
.carousel-caption h1 {
font-size: 150%;
}
.carousel-caption h3 {
font-size: 110%;
font-weight: 500;
padding-bottom: 0.2rem;
}
.carousel-caption .btn {
font-size: 90%;
padding: 4px 8px;
}
.nav-link {
font-size: 60% !important;
}
.navbar-toggler {
float: right;
}
.navButton {
float: none;
width: 100%;
}
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0 !important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#fixed {
background-image: url("img/mac.png");
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
Small (sm) devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
Medium (md) devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
Large (lg) devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
Extra (xl) large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
*/
index.php
<?php
include_once('header.php');
?>
<body>
<!-- Navigation -->
<nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
<div class="container-fluid">
<div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px; align-items:center;">
<div class="col-md-4 col-xs-6">
<a class="navbar-brand" href="#">
<h1 class="display-4 d-none d-md-block">Petitions</h1>
</a>
</div>
<div class="col-md-4 col-xs-6">
<button
class="navbar-toggler custom-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 col-xs-6">
<button type="button" data-toggle="modal" data-target="#modalLoginForm" class="btn btn-primary btn-lg navButton">
Влизане
</button>
</div>
</div>
</div>
</nav>
<!-- Navigation -->
<!-- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="parent d-flex justify-content-center">
<img src="img/background.png" />
</div>
<div class="carousel-caption">
<h1 class="display-1">Против неравеноството си?</h1>
<h3>Бъди промяната!</h3>
<button type="button" class="btn btn-primary btn-lg">
Виж петиции
</button>
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background2.png" />
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background3.png" />
</div>
</div>
</div>
</div>
<!--- Image Slider -->
<!--- Modal -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Парола</label>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Влизане</button>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default" data-toggle="modal" data-target="#modalRegisterForm">Регистрация</button>
</div>
</div>
</div>
</div>
<!--- Modal -->
<!--- Register Modal -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Име</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Паорла</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange">Sign up</button>
</div>
</div>
</div>
</div>
<!--- Register Modal -->
<!--- Jumbotron -->
<!--<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">
A web hosting service allows individuals and organizations to make
their website accessible via the World Wide Web.
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"
><button type="button" class="btn btn-outline-secondary btn-lg">
Web Hosting
</button></a
>
</div>
</div>
</div>-->
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Цел на компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Нашата компания е създадена с цел постигане на положителна промяна в
ежедневието и живота на хора, които са част от различни малцинства,
възрастови групи, както и йерархични постове, живота на животни,
както и на всекиго, който е неспособен да се бори за себе си.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6"><hr class="my-4" /></div>
<div class="col-3"></div>
</div>
<!--- Welcome Section #2 -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Повече за компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Ние вярваме, че не само думите, но и делата са важни.
</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<!--- Two Column Section -->
<!--- Fixed background -->
<!--- Emoji Section -->
<!--- Meet the team -->
<!--- Cards -->
<!--- Two Column Section -->
<!--- Connect -->
<!--- Footer -->
<?php
include_once('footer.php');
?>
</body>
</html>
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Petitions Site</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
footer.php
<footer style="background-color:#12232e;">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-4">
<img src="img/w3newbie.png" />
<hr class="light" />
<p>555-555-5555</p>
<p>email#myemail.com</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>Monday: 9am - 5pm</p>
<p>Saturday: 10am - 4pm</p>
<p>Sunday: closed</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>555-555-5555</p>
<p>email#myemail.com</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-12">
<hr class="light" />
<h5>© petitions.bg</h5>
</div>
</div>
</div>
</footer>

I recreated your issue in CodePen and inspected the elements...
That space on the right of your page is created by an element that is wider than all the others.
There is a CSS rule coming from _grid.scss for .row. A simple fix would be to override it with !important as below.
.row{
margin-left: 0 !important;
margin-right: 0 !important;
}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Petitions Site</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
<div class="container-fluid">
<div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px; align-items:center;">
<div class="col-md-4 col-xs-6">
<a class="navbar-brand" href="#">
<h1 class="display-4 d-none d-md-block">Petitions</h1>
</a>
</div>
<div class="col-md-4 col-xs-6">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 col-xs-6">
<button type="button" data-toggle="modal" data-target="#modalLoginForm" class="btn btn-primary btn-lg navButton">
Влизане
</button>
</div>
</div>
</div>
</nav>
<!-- Navigation -->
<!-- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="parent d-flex justify-content-center">
<img src="img/background.png" />
</div>
<div class="carousel-caption">
<h1 class="display-1">Против неравеноството си?</h1>
<h3>Бъди промяната!</h3>
<button type="button" class="btn btn-primary btn-lg">
Виж петиции
</button>
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background2.png" />
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background3.png" />
</div>
</div>
</div>
</div>
<!--- Image Slider -->
<!--- Modal -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Парола</label>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Влизане</button>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default" data-toggle="modal" data-target="#modalRegisterForm">Регистрация</button>
</div>
</div>
</div>
</div>
<!--- Modal -->
<!--- Register Modal -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Име</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Паорла</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange">Sign up</button>
</div>
</div>
</div>
</div>
<!--- Register Modal -->
<!--- Jumbotron -->
<!--<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">
A web hosting service allows individuals and organizations to make
their website accessible via the World Wide Web.
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"
><button type="button" class="btn btn-outline-secondary btn-lg">
Web Hosting
</button></a
>
</div>
</div>
</div>-->
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Цел на компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Нашата компания е създадена с цел постигане на положителна промяна в
ежедневието и живота на хора, които са част от различни малцинства,
възрастови групи, както и йерархични постове, живота на животни,
както и на всекиго, който е неспособен да се бори за себе си.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<hr class="my-4" />
</div>
<div class="col-3"></div>
</div>
<!--- Welcome Section #2 -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Повече за компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Ние вярваме, че не само думите, но и делата са важни.
</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<!--- Two Column Section -->
<!--- Fixed background -->
<!--- Emoji Section -->
<!--- Meet the team -->
<!--- Cards -->
<!--- Two Column Section -->
<!--- Connect -->
<!--- Footer -->
<footer style="background-color:#12232e;">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-4">
<img src="img/w3newbie.png" />
<hr class="light" />
<p>555-555-5555</p>
<p>email#myemail.com</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>Monday: 9am - 5pm</p>
<p>Saturday: 10am - 4pm</p>
<p>Sunday: closed</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>555-555-5555</p>
<p>email#myemail.com</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-12">
<hr class="light" />
<h5>© petitions.bg</h5>
</div>
</div>
</div>
</footer>
</body>

Select Picker Problem with bootstrap 4: Multiselect Box Goes Off Screen

Below is a complete HTML reproducible example. When using the selectpicker class from bootstrap-select, the live search box flows off to the left in the sidebar when clicking in the box and is not visible in the UI. This did not occur using earlier versions of bootstrap, but I am now migrating to newer versions. I am not able to see the root cause, does anyone else have a suggested fix?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/i18n/defaults-*.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<style>
.sidebar {
top: 50px;
left: 0px;
position: sticky;
}
</style>
<style>
body, html {
height:100%;
overflow: hidden;
}
/*
* Off Canvas sidebar at medium breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 992px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
overflow: auto;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary mb-3">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left vh-100">
<div class="col-md-3 col-lg-2 sidebar-offcanvas h-100 overflow-auto bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-0 pt-5 mt-3">
<li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link" href="#">Layouts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Templates</a></li>
<li class="nav-item"><a class="nav-link" href="#">Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item</a></li>
<select class="selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
</ul>
</div>
<!--/col-->
<main class="col main pt-5 mt-3 h-100 overflow-auto">
<h1 class="display-4 d-none d-sm-block">
Bootstrap Dashboard
</h1>
<p class="lead d-none d-sm-block">Plus scrolling sidebar, based on Bootstrap 4</p>
<div class="alert alert-warning fade collapse" role="alert" id="myAlert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<strong>Holy guacamole!</strong> It's free.. this is an example theme.
</div>
<div class="row mb-3">
<div class="col-xl-3 col-sm-6 py-2">
<div class="card bg-success text-white h-100">
<div class="card-body bg-success">
<div class="rotate">
<i class="fa fa-user fa-4x"></i>
</div>
<h6 class="text-uppercase">Users</h6>
<h1 class="display-4">134</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-danger h-100">
<div class="card-body bg-danger">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Posts</h6>
<h1 class="display-4">87</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-info h-100">
<div class="card-body bg-info">
<div class="rotate">
<i class="fa fa-twitter fa-4x"></i>
</div>
<h6 class="text-uppercase">Tweets</h6>
<h1 class="display-4">125</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-warning h-100">
<div class="card-body">
<div class="rotate">
<i class="fa fa-share fa-4x"></i>
</div>
<h6 class="text-uppercase">Shares</h6>
<h1 class="display-4">36</h1>
</div>
</div>
</div>
</div>
<!--/row-->
<hr>
<a id="features"></a>
<hr>
<p class="lead mt-5">
Are you ready for Bootstap 4? It's the 4th generation of this popular responsive framework. Bootstrap 4 will include some interesting
new features such as flexbox, 5 grid sizes (now including xl), cards, `em` sizing, CSS normalization (reboot) and larger font
sizes.
</p>
<div class="row my-4">
<div class="col-lg-3 col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/740x180/bbb/fff?text=..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Layouts</h4>
<p class="card-text">Flexbox provides simpler, more flexible layout options like vertical centering.</p>
Button
</div>
</div>
<div class="card card-inverse bg-inverse mt-3">
<div class="card-body">
<h3 class="card-title">Flexbox</h3>
<p class="card-text">Flexbox is now the default, and Bootstrap 4 supports SASS out of the box.</p>
Outline
</div>
</div>
</div>
<div class="col-lg-9 col-md-8">
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Label</th>
<th>Header</th>
<th>Column</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>responsive</td>
<td>bootstrap</td>
<td>cards</td>
<td>grid</td>
</tr>
<tr>
<td>1,002</td>
<td>rwd</td>
<td>web designers</td>
<td>theme</td>
<td>responsive</td>
</tr>
<tr>
<td>1,003</td>
<td>free</td>
<td>open-source</td>
<td>download</td>
<td>template</td>
</tr>
<tr>
<td>1,003</td>
<td>frontend</td>
<td>developer</td>
<td>coding</td>
<td>card panel</td>
</tr>
<tr>
<td>1,004</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>mobile-first</td>
<td>design</td>
</tr>
<tr>
<td>1,005</td>
<td>navbar</td>
<td>sticky</td>
<td>jumbtron</td>
<td>header</td>
</tr>
<tr>
<td>1,006</td>
<td>collapse</td>
<td>affix</td>
<td>submenu</td>
<td>flexbox</td>
</tr>
<tr>
<td>1,007</td>
<td>layout</td>
<td>examples</td>
<td>themes</td>
<td>grid</td>
</tr>
<tr>
<td>1,008</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>flexbox</td>
<td>design</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--/row-->
</main>
<!--/main col-->
</div>
</div>
<!--/.container-->
<script>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>

How can I make my image DIVs bigger in a scrollable div?

I have a horizontal scrollable div where I have squared divs. I need to make these squared divs bigger, but I can't achieve this. In the example I provide here, there are 3 squared divs. Each time I add a new one, all of them get even smaller. How can I prevent them from shrinking and maintain my scrollable div?
Here's my codepen.

Set a min-width to your boxes, and make sure your container doesn't wrap.
Modified code is in the bottom of the CSS snippet
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Editar Aviso-->

remove col class from div.img-box,
also you need to change .row class' display property to block from flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}

HTML links with page not working as expect in responsive mode

I'm helping somebody out with a website, I'm by no means an expert. This was a free bootstrap template that I've modified. Everything works perfectly in desktop mode. But when I test (using chrome) the responsive mode the in page links don't work as expected.
To make allowance for the sticky navbar I added a margin to my anchor. I had to use a media query to solve the issue, but it doesn't work with all of my links. The servicing, repairs and care packages work fine, it's the testimonials and contact us, that is causing issues. I've narrowed it down to the section, but can't figure out what is happening.
HTML:
<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="The leader in mobility scooter servicing and repairs in Norfolk and Suffolk. Committed to providing first class customer care, in your own home by friendly staff"/>
<meta name="author" content="CozyApps"/>
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"/>
<meta property="og:image" content="http://whitey012001.000webhostapp.com/img/og-img.jpg" />
<!-- <meta property="og:image:secure_url" content="https://whitey012001.000webhostapp.com/img/og-img.jpg" /> -->
<meta property="og:title" content="First for mobility scooter servicing & repairs across Norfolk & Suffolk" />
<meta property="og:description" content="Welcome to Mobility Services Direct, the leader in mobility scooter servicing and repairs across Norfolk and Suffolk. We proudly trade on our reputation and are committed to providing a first class service built around dedicated customer care." />
<meta property="og:image:height" content="300" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://whitey012001.000webhostapp.com" />
<title>Mobility Scooter Servicing & Repair across Norfolk and Suffolk</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png" />
<!-- Custom styles for this template -->
<link href="css/landing-page-v2.css" rel="stylesheet">
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "Organization",
"url": "http://whitey012001.000webhostapp.com",
"name": "Mobility Services Direct Ltd.",
"contactPoint": {
"#type": "ContactPoint",
"telephone": "+44-1502-450024",
"contactType": "Customer service"
}
}
</script>
</head>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><i class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use other traditional methods</p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class=" features-icons bg-light text-center">
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="contact" class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><i class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
Privacy Policy
</li>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></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="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function(){
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(img/bg-showcase-Servicing-v2.jpg)");
$("#showcase-repairs").css("background-image", "url(img/bg-showcase-Repairs-v2.jpg)");
$("#showcase-care-package").css("background-image", "url(img/bg-showcase-Care-Package-v2.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
}
}
}
</script>
</body>
</html>
CSS:
/*!
* Start Bootstrap - Landing Page v5.0.7 (https://startbootstrap.com/template-overviews/landing-page)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
*/
body{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
position: relative;
}
h1,h2,h3,h4,h5,h6{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700
}
header.masthead{
position:relative;background-color:#343a40;
background:url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size:cover;
padding-top:8rem;
padding-bottom:8rem;
}
header.masthead .overlay{
position:absolute;background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
header.masthead h1{
font-size:2rem
}
#media (max-width:1200px){
header.masthead{
background:url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size:cover;
}
}
#media (max-width: 991px){
#servicing, #repairs, #care{
margin-top: 200px;
}
}
#media (max-width:490px){
.call-to-action a, .call-to-action i, .call-to-action p{
font-size: 1.2rem !important;
}
}
#media (max-width:390px){
.call-to-action a, .call-to-action i, .call-to-action p
.header a, .header i, .header p{
font-size: 1rem !important;
}
.call-to-action .MSDvan{
max-height: 200px;
}
.logo{
max-height: 130px;
}
}
#media (min-width:768px){
header.masthead{
padding-top:12rem;padding-bottom:12rem
}
header.masthead h1{
font-size:3rem
}
}
.showcase .showcase-text{
padding:3rem
}
.showcase .showcase-img{
min-height:30rem;
background-size:cover;
background-position: center center;
}
#media (min-width:768px){
.showcase .showcase-text{
padding:7rem
}
}
i{
color: #0E3A91;
}
.features-icons{
padding-top:7rem;
padding-bottom:7rem
}
.features-icons .features-icons-item{
max-width:20rem
}
.features-icons .features-icons-item .features-icons-icon{
height:7rem
}
.features-icons .features-icons-item .features-icons-icon i{
font-size:4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i{
font-size:5rem
}
.call-to-action{
position:relative;background-color:#343a40;
background:url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size:cover;
padding-top:7rem;
padding-bottom:7rem
}
.call-to-action .overlay{
position:absolute;
background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
.call-to-action a, .call-to-action i, .call-to-action p{
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer{
padding-top:4rem;
padding-bottom:4rem
}
/* Header */
.logo{
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a{
color: #7EA2D3;
text-decoration: none;
}
.header a:hover{
color: red;
}
.header p{
font-size: 1.3em
}
.no-bottom-margin{
margin-bottom: 0;
}
/* Navbar */
.navbar-container{
padding: 0px !important;
}
nav{
background-color: white !important;
}
nav a{
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover{
color: #0E3A91 !important;
}
nav .active, .active a{
color: #0E3A91 !important;
}
.nav-link{
margin-left: 20px;
margin-right: 20px;
}
.link{
margin-top: -50px;
}
.contact-form{
margin: 0 auto;
margin-top:2rem;
max-width: 800px;
}
.btn-primary{
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab{
color: white;
}
.fb-link:hover{
cursor: pointer;
}
.bg-white{
background-color: white;
}
.form-feedback{
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
Hope this all makes sense, and somebody can make sense of it!
Thanks in advance!

Why do we observe this behavior?
the first 3 sections (servicing, repairs & care packages) are inside section and divs and they are used to get some margin on top so that we can see the h2 (which is a child of the ID) on the screen. However, the testimonials & contact us sections are not inside any section and divs; hence, different behaviour.
to see the exact effect, we change one class to see that the spacing is unset now...
#media (max-width: 991px)
#servicing, #repairs, #care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
what this means is that the spans (#servicing, #repairs, #care) are not enough on their own - we see the correct placement of the heading because the image is covering a lot of the portion which the span isn't doing;
How to resolve?
We have to add a span for the link and provide padding as you did for #servicing, #repairs, #care
since the scenario is different for (contact & testimonials) and there is no image to eat up the space, we'd have to add some css - the results for contact and testimonials are different because the hierarchy of elements within these sections is also different.
#media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
Working snippet below:
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function() {
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-repairs").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-care-package").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
}
}
body {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700
}
header.masthead {
position: relative;
background-color: #343a40;
background: url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
header.masthead .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
header.masthead h1 {
font-size: 2rem
}
#media (max-width:1200px) {
header.masthead {
background: url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size: cover;
}
}
#media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
}
}
#media (max-width:490px) {
.call-to-action a,
.call-to-action i,
.call-to-action p {
font-size: 1.2rem !important;
}
}
#media (max-width:390px) {
.call-to-action a,
.call-to-action i,
.call-to-action p .header a,
.header i,
.header p {
font-size: 1rem !important;
}
.call-to-action .MSDvan {
max-height: 200px;
}
.logo {
max-height: 130px;
}
}
#media (min-width:768px) {
header.masthead {
padding-top: 12rem;
padding-bottom: 12rem
}
header.masthead h1 {
font-size: 3rem
}
}
.showcase .showcase-text {
padding: 3rem
}
.showcase .showcase-img {
min-height: 30rem;
background-size: cover;
background-position: center center;
}
#media (min-width:768px) {
.showcase .showcase-text {
padding: 7rem
}
}
i {
color: #0E3A91;
}
.features-icons {
padding-top: 7rem;
padding-bottom: 7rem
}
.features-icons .features-icons-item {
max-width: 20rem
}
.features-icons .features-icons-item .features-icons-icon {
height: 7rem
}
.features-icons .features-icons-item .features-icons-icon i {
font-size: 4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i {
font-size: 5rem
}
.call-to-action {
position: relative;
background-color: #343a40;
background: url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size: cover;
padding-top: 7rem;
padding-bottom: 7rem
}
.call-to-action .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
.call-to-action a,
.call-to-action i,
.call-to-action p {
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer {
padding-top: 4rem;
padding-bottom: 4rem
}
/* Header */
.logo {
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a {
color: #7EA2D3;
text-decoration: none;
}
.header a:hover {
color: red;
}
.header p {
font-size: 1.3em
}
.no-bottom-margin {
margin-bottom: 0;
}
/* Navbar */
.navbar-container {
padding: 0px !important;
}
nav {
background-color: white !important;
}
nav a {
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover {
color: #0E3A91 !important;
}
nav .active,
.active a {
color: #0E3A91 !important;
}
.nav-link {
margin-left: 20px;
margin-right: 20px;
}
.link {
margin-top: -50px;
}
.contact-form {
margin: 0 auto;
margin-top: 2rem;
max-width: 800px;
}
.btn-primary {
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab {
color: white;
}
.fb-link:hover {
cursor: pointer;
}
.bg-white {
background-color: white;
}
.form-feedback {
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
/*
#media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
}
*/
#media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><a href="mailto:support#mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</a></p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use other traditional methods</p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<span id="testimonials" class="link"></span>
<section class=" features-icons bg-light text-center">
<span class="link"></span>
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<span id="contact"></span>
<section class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><a href="mailto:support#mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</a></p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.
</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
Privacy Policy
</li>
</div>
</div>
</div>
</footer>

sorry , still not work for me,
so i add script to link :
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
<script>
function load(x)
{
window.location.href= x+'.php';
}
</script>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Bootstrap 4 - Rows overlapping when reaching mobile screen size - html

Related

Position image to the right of content using css/bootstrap

Page has weird little white spacing on the right side

Select Picker Problem with bootstrap 4: Multiselect Box Goes Off Screen

How can I make my image DIVs bigger in a scrollable div?

HTML links with page not working as expect in responsive mode

Categories

Resources