Bootstrap4 not responsive - html

Question

html, body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform:translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
#navbar {
}
.logo{
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
#navbar .nav-link:focus {
color: #8e0000;
text-size-adjust: 1.4em;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin{
-webkit-animation: spin 1s ;
animation: spin 3s ;
animation-iteration-count: 1;
}
#-webkit-keyframes spin{
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin{
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 20px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
/* margin-left: 40px; */
}
/* ABOUT */
#about {
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 250px;
}
.section2 .row{
background: url("../images/improved-teamwork-and-collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 3px;
z-index: 1;
}
.section2 .card {
background-color: RGBA(33,37,41,.80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
z-index: 2;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0,0,0, 0.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0, 0.8));
}
.section2 .card-block {
z-index: 3;
font-weight: 520;
width: 50%;
font-size: 25px;
line-height: 50px;
padding: 60px;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 0px;
}
/* SKILLS */
#skills {
margin-bottom: 50px;
margin-top: 20px;
}
#skills .code-icon {
margin-top: 10px;
margin-bottom: 15px;
}
#skills .col {
letter-spacing: .6px;
}
#skills .container{
border-style: solid;
border-width: 3px;
z-index: 0;
color: #d4d4dc;
background-color: #1d1e22;
border-color: black;
border-radius: .5%;
line-height: 2.4em;
font-size: 1.4em;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
padding-top: 5%;
padding-bottom: 5%;
}
#skills ul {
list-style: none;
}
/* PROJECTS */
#projects {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
margin-top: 70px;
margin-bottom: 50px;
}
#projects .row h1,
#projects .row .works-description {
text-shadow: .08px .5px black;
}
#projects .text-center {
max-width: 500px;
margin-bottom: 30px;
border-radius: 3px;
min-width: 300px;
box-shadow: 0 2px 8px 2px rgb(0, 0, 0);
padding: 15px;
background: #81888373;
text-shadow: .08px .5px black;
}
.works-description a {
color: #8e0000;
line-height: 36px;
margin-bottom: 36px;
width: 90%;
max-width: 1000px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.works-description {
line-height: 36px;
margin-bottom: 36px;
width: 90%;
max-width: 1000px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#projects .card-image-container {
width: 95%;
max-width: 420px;
max-height: 300px;
margin: 18px auto;
border-radius: 3px;
border: .5px solid #8e0000;
}
#projects .card-image-container
{
position:relative;
-webkit-box-shadow:0 1px 5px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.8);
-moz-box-shadow:0 1px 5px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.8);
box-shadow:0 1px 5px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.8);
}
#projects .card-image-container:before, #projects .card-image-container:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius: 100px / 10px;
}
#projects .card-image-container:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
#media only screen and (max-width: 767px) {
#projects .card-image-container {
border-style: none;
box-shadow: none;
}
}
#projects img {
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 100%;
}
#media only screen and (max-width: 992px) {
#projects img{
width: 200px;
}
}
#media only screen and (max-width: 408px) {
#projects img {
width: 150px;
}
}
#projects .card-body {
padding: 0 1.25rem;
margin-bottom: 18px;
}
#projects .summary {
color: #8e0000;
}
#projects .card-summary {
font-size: 18px;
margin-bottom: 18px;
line-height: 36px;
}
#media only screen and (min-width: 992px) {
#projects .card-summary {
height: 180px;
}
}
#media only screen and (min-width: 768px) {
#projects .card-summary {
height: 150px;
}
}
/*FOR BUTTONS GO HERE: *https://bootsnipp.com/snippets/Gl29g*/
/* background: -webkit-linear-gradient(to right, #212529, #8e0000); /* Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(to right,#212529, #8e0000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/*font-size: 1.1rem; */
#projects .btn-rounded {
border-radius: 2px;
}
.btn-dark-moon {
background: #212529; /* fallback for old browsers */
color: rgba(255, 255, 255, 0.747);
border: 2px solid #eee;
position: relative;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
margin-right: 5px;
}
.btn-dark-moon:hover {
color: white;
border-width: 2.2px;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
}
.btn-darker-moon {
background: #212529; /* fallback for old browsers */
color: rgba(255, 255, 255, 0.747);
border: 2px solid #eee;
position: relative;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
margin-right: 5px;
}
.btn-darker-moon:hover {
color: white;
border-width: 2.2px;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
}
/*TESTIMONIALS*/
.testimonials {
margin: 50px auto;
color: #777;
margin-top: 115px;
margin-bottom: 100px;
text-shadow: .08px .5px black;
}
.testimonials h1 {
text-align: center;
font-weight: bold;
color: #8e0000;
padding-bottom: 10px;
text-transform: uppercase;
}
.testimonials .sayings {
font-size: 1.2em;
}
.testimonials h1::after {
content: '';
background: #8e0000;
display: block;
height: 3px;
width: 170px;
margin: 20px auto 5px;
}
.testimonials .row {
margin-top: 30px;
}
.col-md-4 {
margin: 40px auto;
}
.profile {
padding: 70px 10px 10px;
background-color: #353535;
border-radius: 3px;
/* box-shadow:0 0 20px rgba(0,0,0,0.8); */
position: relative;
}
.profile:before, .profile:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgb(105, 105, 105);
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.profile:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.profile img {
top: -60px;
position: absolute;
left: calc(50% - 60px);
border: 10px solid #e3e3e3;
}
.user {
width: 120px;
height: 120px;
border-radius: 50%;
}
.profile h3 {
font-size: 23px;
margin-top: 15px;
color: #790505;
}
.credentials {
font-weight: bolder;
}
.credentials span {
font-size: 12px;
color: #777;
}
.profile blockquote {
font-size: 16px;
line-height: 30px;
/* quotes: "\201C""\201D""\2018""\2019"; FOR USE WITH QUOTES TO SOLVE NESTED ISSUE WITH CODE BELOW */
}
.profile blockquote::before {
content: open-quote;
font-size: 50px;
position: relative;
color: #790505;
line-height: 20px;
bottom: -15px;
right: 5px;
}
.profile blockquote::after {
content: close-quote;
font-size: 50px;
position: relative;
color: #790505;
line-height: 10px;
bottom: -15px;
right: 5px;
}
.profile blockquote {
height: 161px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration: 1.8s">King.</span>
<br>
<div class="intro animated fadeInLeft" style="animation-delay: 3s; animation-duration: 2s">And I'm a full-stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration: 2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s; animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item focus">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor2">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor3">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor4">TESTIMONIALS
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SKILLS -->
<div class="blank" style="margin: -65px 0px 250px 0px; position: absolute;">
<a id="myanchor2"></a>
</div>
<section id="skills" class="section3">
<div class="row justify-content-center">
<div class="col-md-7 col-sm-12">
<div class="card text-center">
<div class="container">
<div class="card-title">
<h2>Tech I've learned:</h2>
</div>
<div class="col"><img class="code-icon" src="assets/images/code-solid.png" style="height: 12%; width: 12%; ">
<p>JavaScript, HTML, CSS, MongoDB, Express, Node.js, Bootstrap, mySQL, AWS Cloud Storage, and more...</p>
<h2>Tools I use:</h2>
<ul>
<li>Visual Studio Code</li>
<li>Github</li>
<li>Express</li>
<li>Linux</li>
<li>Axios</li>
<li>npm</li>
<li>Bash</li>
<li>Chrome Developer Tools</li>
<li>And more...</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PROJECTS -->
<div class="blank" style="margin: -65px 0px 250px 0px; position: absolute;">
<a id="myanchor3"></a>
</div>
<section id="projects" class="section4">
<div class="container">
<div class="row justify-content-center">
<h1>My Recent Projects</h1>
<p class="works-description">These are all self-directed projects. You can find more work on my
Github.<br> Below are just some of my most recent works. Let me know if you have any questions!
</p>
<div class="row justify-content-center">
<div class="col-md-5 col-sm-12">
<div class="text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://kingdomb.github.io/google-promo/">
<img src="assets/images/laptop-project-insertion-floating1SHADOW.png" alt="Google-Promo-Project">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>Google Home</h2>
</div>
<p class="card-tech card-text">JavaScript, HTML, CSS, Bootstrap</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
This project displays my use of javascript animations, and website design best practices. Firsts in this project included the added animations. </div>
<a href="https://kingdomb.github.io/google-promo/" class="btn btn-darker-moon btn-rounded">View
Demo</a>
View Code
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://kingdomb.github.io/Food_Searcher/">
<img src="assets/images/laptop-project-insertion-floating2SHADOW.png" alt="Nutrition-Searcher-Project">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>Nutrition Searcher</h2>
</div>
<p class="card-tech card-text">jQuery, JS, HTML, REST APIs, Regex, Materialize</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
This app returns nutritional value of foods, and calculates the length of time it takes to burn those calories.</div>
<a href="https://kingdomb.github.io/Food_Searcher/" class="btn btn-darker-moon btn-rounded">View
Demo</a>
<a href="https://github.com/KingdomB/Food_Searcher" class="btn btn-dark-moon btn-rounded">View
Code</a>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="card text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://raw.githubusercontent.com/KingdomB/Bamazon/master/bamazon.gif">
<img src="assets/images/laptop-project-insertion-floating3SHADOW.gif" alt="Bamazon-gif">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>Bamazon CLI Store</h2>
</div>
<p class="card-tech card-text">JavaScript, Node.js, MySQL</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
Created an small Amazon-like storefront. The store interface prompts the user to select an item for purchase. After a quantity selection the inventory adjusts accordingly.</div>
View Demo
View Code
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="card text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://raw.githubusercontent.com/KingdomB/liri-node-app/master/liri-node-app.gif">
<img src="assets/images/laptop-project-insertion-floating4SHADOW.gif" alt="LIRI-Node-Project">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>LIRI-Node-CLI</h2>
</div>
<p class="card-tech card-text"> JavaScript, Node.js, Axios, RESTful APIs, Inquirer</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
Command line user interface that receives search query inputs, and GET requests to return results from music, movie, and concert APIs</div>
View Demo
<a href="https://github.com/KingdomB/liri-node-app" class="btn btn-dark-moon btn-rounded">View
Code</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
So I have created a page and tried my best to use Bootstrap 4. But here is the thing, the page has all types of responsive errors, and one of the hallmarks of Bootstrap is that it is responsive. So, I would like some advice on the errors that I note below, please.
At 1199px X 836 both cards on the left in the "projects" section decrease vertically by maybe 20px.
-I would like all four cards to stay the same size and of course at some point the cards should display: block. But not at 1199px.
At 1124 the "about" section creates a top and bottom grey border, but what is more interesting is that 1027px X 836 the text wraps and things get ugly.
At 991px X 836px everything becomes messy. Navbar logo and logo-brand wrap and extend outside of the navbar container, about section text starts to push out of its container, and testimonials text starts overlapping.
I don't fully understand the css position methods and I believe this may be the issue, but if you can help me to get a better understanding of what I am doing wrong then I would greatly appreciate it.
Thanks
PS. I don't want to load down the post with my code so here is a link to the repo and the page:
repo
page

Answer 1

You must add bootstrap cdn link. Add this in head tag:
<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">
and this in at the end of body:
<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>
Or go to this page and download the bootstrap file if you want to use bootstrap also offline