Develop Reference

Why is my website's grid collapsing the first time it's loaded?

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

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

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

Make entire div act as a link except one div which also has another link

I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.
The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.
How can i make it cover for the whole product card with one link and, only person name for the another link.
By inspecting the first and second product cards, you may execute the code and locate my current problem.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->

Please check the second card which I updated
It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the name tag with an tag with another link.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #ccc;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#card-2 {
cursor: pointer;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group"></div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
alt=""
/>
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<div
id="card-2"
class="item col-xs-4 col-md-3"
onclick="window.location='https://www.youtube.com'"
>
<div class="thumbnail">
<img
class="img-id"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
alt=""
/>
<div class="person">
<a href="https://www.linkedin.com/">
<p class="person-name">Person Name</p>
</a>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</div>
</div>
</div>

Javascript text animation not triggering

I have a Bootstrap 5 carousel with two lines of caption per slide. Each time right before the slide changes, I want the old top caption to move up and fade out, and the old bottom caption to move down and fade out. Then on the next slide, the new top caption should move down into place and fade in and the new bottom caption should move up into place and fade in.
I'm a novice coder and I'm doing this as an excercise. You can see the code I've written for this below, or in this CodePen. I've tried it two ways, the second method is commented in the JS section in CodePen.
I've also added a responsive section to the CSS so you can kind of see what I want to happen: the animation is triggered at a window width of 600px.
The same animation doesn't trigger when the slides change, though. Why not? How can I make it better?
Method 1:
import * as jquery from "https://cdn.skypack.dev/jQuery#1.7.4";
const TopCap = document.querySelector (".carousel-caption");
const BottomCap = document.querySelector (".caption-bottom");
const SlideClass = ("slide");
$('#CarouselTextAnim').on('slide.bs.carousel', function() {
TopCap.classlist.addClass(SlideClass);
BottomCap.classlist.addClass(SlideClass);
});
$('#CarouselTextAnim').on('slid.bs.carousel', function() {
TopCap.classlist.removeClass(SlideClass);
BottomCap.classlist.removeClass(SlideClass);
});
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2,15,19,0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -30vh;
opacity: 0;
}
#media (max-width: 600px) {
.carousel-caption {
top: 0;
opacity: 0;
}
.caption-bottom {
bottom: -30vh;
opacity: 0;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="5000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</body>
Method 2 (only the Javascript is different):
import * as jquery from "https://cdn.skypack.dev/jQuery#1.7.4";
const TopCap = document.querySelector (".carousel-caption");
const BottomCap = document.querySelector (".caption-bottom");
$('#CarouselTextAnim').on('slide.bs.carousel', function() {
TopCap.setAttribute('top', '0');
TopCap.setAttribute('opacity', '0');
BottomCap.setAttribute('bottom', '0');
BottomCap.setAttribute('opacity', '0');
});
$('#CarouselTextAnim').on('slid.bs.carousel', function() {
TopCap.setAttribute('top', '40%');
TopCap.setAttribute('opacity', '1');
BottomCap.setAttribute('bottom', '4vh');
BottomCap.setAttribute('opacity', '1');
});
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2,15,19,0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -30vh;
opacity: 0;
}
#media (max-width: 600px) {
.carousel-caption {
top: 0;
opacity: 0;
}
.caption-bottom {
bottom: -30vh;
opacity: 0;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="5000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</body>

You are mixing jQuery libraries in your pen, as well as mixing vanilla js with jQuery, just stick to one, I'd suggest vanilla.
I did not go your styles entirely to find out which class it uses to handle that bottom effect, which you will have to update, but the top element is working.
Also unlike using jQuery's $ to select elements, when using vanilla js const TopCap = document.querySelector (".carousel-caption"); and have several elements as in each slide, you would have to loop through them and select them all as follow: const TopCap = document.querySelectorAll (".carousel-caption");
const TopCap = document.querySelectorAll(".carousel-caption");
const BottomCap = document.querySelectorAll(".caption-bottom");
var myCarousel = document.querySelector('#CarouselTextAnim')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: true
})
myCarousel.addEventListener('slid.bs.carousel', function () {
TopCap.forEach(cap=>cap.classList.remove('slide'));
BottomCap.forEach(cap=>cap.classList.remove('slide'));
});
myCarousel.addEventListener('slide.bs.carousel', function () {
TopCap.forEach(cap=>cap.classList.add('slide'));
BottomCap.forEach(cap=>cap.classList.add('slide'));
});
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2,15,19,0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -30vh;
opacity: 0;
}
#media (max-width: 600px) {
.carousel-caption {
top: 0;
opacity: 0;
}
.caption-bottom {
bottom: -30vh;
opacity: 0;
}
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide">
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>

Html + Css page not responsive

I am new to html I created a html page and looks good but don't know why the page is not responsive on mobile
here is my html and css code please someone help me
.link-menu {
color: black;
}
.topbar-profile-photo {
width: 1.5em;
height: 1.5em;
position: relative;
}
.story-profile-photo {
width: 56px;
height: 56px;
position: relative;
border-width: 2px !important;
}
.post-profile-photo {
width: 46px;
height: 46px;
position: relative;
border-width: 2px !important;
}
.sidenav-profile-photo {
width: 56px;
height: 56px;
position: relative;
}
.comment-box {
border-top: 1px solid lightgray;
}
.input-post {
outline: none;
}
.btn-ig {
background-color: transparent;
border: 0;
color: #89216b;
font-weight: 600;
right: 0;
bottom: 0;
top: 0;
outline: none !important;
}
.btn-ig:hover,
.btn-ig:focus {
background-color: transparent !important;
color: #89216 !important;
}
.profile-info {
font-size: 14px;
}
.profile-info-username {
display: block;
font-weight: 700;
}
.sugest-profile-photo {
width: 46px;
height: 46px;
position: relative;
}
.sugest-username {
font-size: 14px
}
.btn-group button {
background-color: white; /* Green background */
border: solid #d1cfcf; /* Grey border */
border-width: 1px; /* Border width */
color: #89216b; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/d3d6f2df1f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container justify-content-center">
<div class="d-flex flex-row justify-content-between align-items-center col-9">
<a class="navbar-brand" href="#">
<img src="assets/images/ig-logo.png" alt="" loading="lazy">
</a>
<div>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</div>
</nav>
</div>
<div class="mt-4">
<div class="container d-flex justify-content-center">
<div class="col-9">
<div class="row">
<div class="col-8">
<!-- START OF STORIES -->
<div class="card">
<div class="card-body d-flex justify-content-start">
<ul class="list-unstyled mb-0">
<li class="list-inline-item">
</li>
<li class="list-inline-item">
</li>
</ul>
</div>
</div>
<!-- END OF STORIES -->
<!-- START OF POSTS -->
<div class="d-flex flex-column mt-4 mb-4">
<div class="card">
<div class="card-header p-3">
<div class="d-flex flex-row align-items-center">
<div
class="rounded-circle overflow-hidden d-flex justify-content-center align-items-center border border-danger post-profile-photo mr-3">
<img src="assets/images/profiles/profile-1.jpg" alt="..."
style="transform: scale(1.5); width: 100%; position: absolute; left: 0;">
</div>
<figure>
<span class="font-weight-bold">Outfitters</span>
<figcaption>08/03/2021</figcaption>
</figure>
</div>
</div>
<div class="card-body p-0">
<p class="d-block mb-1" style="margin: 10px;">Lil drone shot I got a while back but never posted.</p>
<div class="embed-responsive embed-responsive-1by1">
<img class="embed-responsive-item" src="assets/images/posts/post-1.jpg" />
</div>
<div class="btn-group" style="width:100%">
<button style="width:33.3%">Like</button>
<button style="width:33.3%">Comment</button>
<button style="width:33.3%">Share</button>
</div>
<div class="pl-3 pr-3 pb-2">
<strong class="d-block">365 likes</strong>
<strong class="d-block">Outfitters</strong>
<button class="btn p-0">
<span class="text-muted">View all 100 comments</span>
</button>
<div>
<div>
<strong class="d-block">Usama</strong>
<span>❤️💓💓💓💓💓</span>
</div>
<div>
<strong class="d-block">Saqib</strong>
<span>Hi</span>
</div>
</div>
<small class="text-muted">4 HOURS AGO</small>
</div>
<div class="position-relative comment-box">
<form>
<input class="w-100 border-0 p-3 input-post" placeholder="Add a comment...">
<button class="btn btn-primary position-absolute btn-ig">Post</button>
</form>
</div>
</div>
</div>
</div>
<!-- END OF POSTS -->
</div>
</div>
</div>
</div>
</div>
</body>
<footer>
<!-- JS, Popper.js, and jQuery -->
<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.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</footer>
</html>

Seems that problem in using col-9 and col-8 those you apply for divs inside div.container
col-9 and col-8 classes have max-width and flex properties those limit the width.
Just remove them, and it should help with mobile view, but you have to tweak your CSS styles a little bit more, depends what you want to achieve to desktop and tablet screens.

My JS is not working with my html/css. Not sure why. (Console error 'ReferenceError: $ is not defined')

I am trying to create a content slider, and am having difficulties with it functioning appropriately. Specifically when testing locally the aspect that is not working is: (When you click the arrows left or right the current-slide fades out and fades back in but the slide content does not switch to the next block of content.)
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<html lang="en-US">
<meta charset="UTF-8">
<title>PLACEHOLDER</title>
<meta name"keywords" content="PLACEHOLDER" />
<meta name"description" content="PLACEHOLDER" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="code.js"></script>
<link type="text/css" rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
Here is my JS:
var main = function () {
$('.arrow-next').click(function () {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next()
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function()
{
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev()
if(prevSlide.length == 0)
{
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
HERE IS MY CSS(Just to tie it all together):
.slider {
position: relative;
width: 50%;
height: 470px;
margin-left: 25%;
border-bottom: 1px solid #ddd;
margin-top: -8%;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
margin-top: 30%;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
NOTE: I only put the sections of html/js/css that matter for this case. And I used placeholders for some text and images. On my local machine those placeholders are replaced with correct content.

if you look at the HTML closely, you'll see that the slider div's are not positioned properly. all the other div's with the class '.slide' are enclosed inside <div class="slide active-slide"> whereas they should be independent of each other.
the javascript code is not able to find the next() slide since they're all contained in one single parent which is the 'active-slide'
you need to update your HTML to the following
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
here's a working JSFIDDLE for the same. hope this helps

You just need to include the jQuery library from here: http://jquery.com/download/

You will get this error if you haven't included jquery file or you are getting conflicts in jquery.
ReferenceError: $ is not defined
Add following in Head section of your code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>