We Keep Coding

Overlapping images before refresh / on some browsers [duplicate]

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

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

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

Query 'data-value' to Populate Conditional If Statement

For each .round div, there is a data-value(%) which is static at the moment, but eventually going to be dynamic. Trying to call it in my JS for if data-value <= 0.50 display the bar as red, if data-value >0.50 && data-value <=0.75 display the bar as yellow and if data-value > 0.75 display it as green
to call that value and wrap the Circle function in a conditional, how would I go about that?
I tried the following and it told Cannot read property 'getAttribute' of null:
I tried this.getAttribute('data-value');
This is the JS with the above "solution" but doesn't populate anything:
function Circle(el){
var a = document.querySelector("a");
console.log(a.getAttribute('data-value'));
if(a.getAttribute('data-value') <= 0.50){
$(el).circleProgress({fill: {color: 'red'}})
.on('circle-animation-progress', function(event,
progress, stepValue){
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2) + '%');
});
}
if(a.getAttribute('data-value') > 0.50 && a.getAttribute('data-value') <= 0.75){
$(el).circleProgress({fill: {color: 'yellow'}})
.on('circle-animation-progress', function(event,
progress, stepValue){
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2) + '%');
});
}
if(a.getAttribute('data-value') > 0.75){
$(el).circleProgress({fill: {color: 'green'}})
.on('circle-animation-progress', function(event,
progress, stepValue){
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2) + '%');
});
}
};
Circle('.round');
Here is my working snippet:
function Circle(el){
//if(data-value < 0.50){
$(el).circleProgress({fill: {color: 'red'}})
.on('circle-animation-progress', function(event,
progress, stepValue){
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2) + '%');
});
//}
//if(data-value )
};
Circle('.round');
#circleBar {
margin-top: 50px;
text-align: center;
font-family: tahoma;
}
#circleBar .round{
min-height: 255px;
margin-top: 30px;
position: relative;
margin-bottom: 20px;
}
#circleBar .round strong{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
transform: translate(-50%);
font-size: 40px;
color: #212121;
font-weight: 100;
}
#circleBar span{
display: block;
color: #999;
font-size: 17px;
margin-top: 10px;
}
#circleBar span i{
color: #104723;
font-size: 22px;
margin-right: 7px;
}
section button:active{
background-color: #104723;
border-color: #b3ab7d;
}
section button:hover{
background-color: #104723;
border-color: #b3ab7d;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initialscale=1.0">
<title>Morning Report Tracker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js" integrity="sha512-EZhmSl/hiKyEHklogkakFnSYa5mWsLmTC4ZfvVzhqYNLPbXKAXsjUYRf2O9OlzQN33H0xBVfGSEIUeqt9astHQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/site.css">
</head>
<body>
<section id="circleBar">
<h1>Morning Report Tracker</h1>
<p>By Location</p>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.87" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>
Kuwait
</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>
Albania
</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.44" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>
Australia
</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.15" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>
Guam
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.77" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>
Thailand
</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>
Syria
</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.54" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>
Japan
</span>
</div>
</div>
</div>
</div>
<button class="btn" onclick="Circle('.round')">Load Attendance</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js" integrity="sha512-6kvhZ/39gRVLmoM/6JxbbJVTYzL/gnbDVsHACLx/31IREU4l3sI7yeO0d4gw8xU5Mpmm/17LMaDHOCf+TvuC2Q==" crossorigin="anonymous"></script>
</body>
</html>

To read the data attribute of each element in the set you'll need to get a reference to it. As the fill.color property of the library only accepts a string, not a function, then you'll need to use an each() loop to do that.
From there it's a straightforward condition to determine the value and return the relevant colour. Try this:
function Circle(selector) {
$(selector).each((i, el) => {
let $el = $(el);
let value = $el.data('value');
$el.circleProgress({
fill: { color: value < 0.5 ? 'red' : value < 0.75 ? 'yellow' : 'green' }
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((stepValue * 100).toFixed(0) + '%');
});
});
};
Circle('.round');
$('.btn').on('click', () => Circle('.round'));
#circleBar {
margin-top: 50px;
text-align: center;
font-family: tahoma;
}
#circleBar .round {
min-height: 255px;
margin-top: 30px;
position: relative;
margin-bottom: 20px;
}
#circleBar .round strong {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
transform: translate(-50%);
font-size: 40px;
color: #212121;
font-weight: 100;
}
#circleBar span {
display: block;
color: #999;
font-size: 17px;
margin-top: 10px;
}
#circleBar span i {
color: #104723;
font-size: 22px;
margin-right: 7px;
}
section button:active {
background-color: #104723;
border-color: #b3ab7d;
}
section button:hover {
background-color: #104723;
border-color: #b3ab7d;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/site.css">
<section id="circleBar">
<h1>Morning Report Tracker</h1>
<p>By Location</p>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.87" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Kuwait</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Albania</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.44" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Australia</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.15" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Guam</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="round" data-value="0.77" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Thailand</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.74" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Syria</span>
</div>
</div>
<div class="col-md-3">
<div class="round" data-value="0.54" data-size="200" data-thickness="12">
<strong></strong>
<span><i class="fa fa-map-marker"></i>Japan</span>
</div>
</div>
</div>
</div>
<button class="btn">Load Attendance</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js" integrity="sha512-6kvhZ/39gRVLmoM/6JxbbJVTYzL/gnbDVsHACLx/31IREU4l3sI7yeO0d4gw8xU5Mpmm/17LMaDHOCf+TvuC2Q==" crossorigin="anonymous"></script>
Note that I tweaked the code slightly by removing the inline onclick attribute, which are bad practice and should be avoided where possible, and also converting the toFixed()/substr() calls to work with the step value as an integer and display it without decimal precision.

Scrolldown function

I'm creating a single page mock gym website and i'm using a scroll down function on the nav bar buttons to the relevant sections. I'm also trying to use it on a link in the 'classes' section of the page to scroll down to the contact section of the page. However, when after putting in the js code it takes me to the top of the page instead. the error i'm getting in the console is : Cannot read property 'addEventListener' of null but i don't understand how to fix the problem from similar issues on stackoverflow. Below is the code and the section i'm talking about is the first card in the classes title 'spin' which a 'call or email to book now' link. I would be greatful for any help :)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>FITT GYM</title>
</head>
<body>
<!--nav bar-->
<header>
<div class="logo-text">
<h1 class="logo-text"><span>FITT GYM</span></h1>
</div>
<i class="fa fa-bars menu-toggle"></i>
<ul class="nav">
<li> Home</li>
<li> About</li>
<li> Classes</li>
<li> PT</li>
<li> Contact</li>
</ul>
</header>
<!--nav bar-->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/woman-lifting-barbell-1552249.jpg" class="d-block w-100" alt="barbell">
</div>
<div class="carousel-item">
<img src="img/adult-athlete-body-bodybuilding-414029.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/photo-of-woman-jumping-on-box-2294403.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
<br>
<!--about-->
<div class="about-section">
<h2 class="about-header">About FITT GYM</h2>
<p class="about-para"><i>FITT Gym is a berkshire based gym designed to help individuals achieve their fittness goals.
Founded in 2014, FITT gym has been recognized as one of the top UK gym brands for it's high intensity workouts,
results driven personal trainers and for being one of the most socialable gyms to go to. With a state of the art facility
FITT gym makes your workout experince a comfortable one as well as endless equipment to train with.</i>
</p>
</div>
<br>
<div class="classes-section">
<h1 class="classes-header">Classes</h1>
<p class="classes-about"><i>The most popular reason why people become come to FITT gym is our classes! see what's on below:</i></p>
<body>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/athlete-bike-black-and-white-cycle-260409.jpg" alt="Card image cap">
<h4 class="card-title">Spin</h4>
<p class="card-text p-y-1" id="spin-card-text">The ride of your life to ensure you can ride mountains.</p>
<ul>
<li>Call or Email to Book Now</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-in-blue-shorts-carrying-brown-exercise-equipments-116079.jpg" alt="Card image cap">
<h4 class="card-title">Kettle Bells</h4>
<p class="card-text p-y-1">Russian style kettle bell workout to make you tougher than ever.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/there-women-in-a-yoga-session-917732.jpg" alt="Card image cap">
<h4 class="card-title">Yoga</h4>
<p class="card-text p-y-1">An experince that will clean your mind and keep you healthy.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/people-boxing-inside-gym-1862785.jpg" alt="Card image cap">
<h4 class="card-title">Boxing</h4>
<p class="card-text p-y-1">Fight your way through this tough workout with our experienced trainers.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/person-holding-barbell-841130.jpg" alt="Card image cap">
<h4 class="card-title">Crossfit</h4>
<p class="card-text p-y-1">Increase your power in our crossfit bootcamp and you'll be as strong as the hulk</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-working-out-2294361.jpg" alt="Card image cap">
<h4 class="card-title">Core Conditioning</h4>
<p class="card-text p-y-1">The core conditioning class will shake up your abs.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="pt-section">
<h2 class = "pt-header">Personal Training</h2>
<p class="pt-about"><i>If you feel you need a 1:1 personal training session, then our trainers here at FITT can offer sessions that a personally designed for your personal goals and needs.
Whether you want to build muscle, lose weight, or just feel better, we can help achieve that with our experienced trainers.
Click below to book a session:</i></p>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/action-active-adult-body-416754.jpg" alt="Card image cap">
<h4 class="card-title">1:1 Session</h4>
<p class="card-text p-y-1" id="spin-card-text">A serious workout that will direct you towards your goals. Prepare for intensity and achievement!</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<br>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-and-woman-holding-battle-ropes-1552242.jpg" alt="Card image cap">
<h4 class="card-title">2:1 Session</h4>
<p class="card-text p-y-1">A workout for you and a friend or family member to get FITT together. Achieveing goals together forms bonds that last forever! </p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<img class="card-img-top" src="img/man-and-woman-doing-yoga-1882004.jpg" alt="Card image cap">
<h4 class="card-title">1:1 Meditation</h4>
<p class="card-text p-y-1">Learn to focus, clear thoughts and feel mentally stronger. Have a 1 to 1 session with a meditation master and reach enlightenment.</p>
<p><b>Call or Email to Book Now</b></p>
</div>
</div>
</div>
</div>
</section>
<br>
<section class="contact-section">
<h1 class="contact-header">Contact</h1>
<footer class="footer-distributed">
<div class="footer-left">
<h3>FITT GYM</h3>
<p class="footer-links">
Home
About
Classes
PT
Contact
</p>
<p class="footer-company-name">FITT Gym © 2020</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Epic Road</span> Windsor, <br> Berkshire, <br> United Kingdom, <br> SL8 8QE</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>01344 865467677</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p>info#fittgym.com</p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About FITT Gym</span>
FITT Gym is a berkshire based gym designed to help individuals achieve their fittness goals.
</p>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
</div>
</div>
</footer>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
* {
box-sizing: border-box;
list-style: none;
}
body {
padding: 0px;
margin: 0px;
height: 100%;
background-color: #0c0c0c;
font-family: 'Poppins', sans-serif;
min-height: 100vh;
}
#carouselExampleSlidesOnly{
z-index: -5;
}
#classes-heading{
text-align: center;
}
.grid-container {
display: grid;
}
.card-text {
color: #0c0c0c;
}
.btn-btn-primary {
align-items: center;
}
#classes-header {
color: white;
}
header{
background: #0c0c0c;
height: 66px;
}
header * {
color: white;
}
.header .logo {
float: left;
height: inherit;
margin-left: 7em;
}
header .logo-text {
margin: 8px;
}
header ul{
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
}
header ul li a:hover{
background: #3c3b3d83
}
header .menu-toggle{
display: none;
}
.page-wrapper{
min-height: 100%;
}
.about-header {
text-align: center;
color: white;
}
.about-para {
font-size: 1.3em;
color:white ;
text-align: center;
}
.classes-header {
text-align: center;
color:white ;
}
.classes-about {
font-size: 1.3em;
color:white ;
text-align: center;
}
.pt-header {
text-align: center;
color: white;
}
.pt-about {
font-size: 1.3em;
color: white;
text-align: center;
}
.footer-distributed{
background: #666;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 55px 50px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
margin: 0;
}
.footer-distributed h3 span{
color: rgb(31, 66, 163);
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
font-weight:400;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #222;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
font-weight:400;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: rgb(32, 59, 178);
text-decoration: none;;
}
.footer-distributed .footer-links a:before {
content: "|";
font-weight:300;
font-size: 20px;
left: 0;
color: #fff;
display: inline-block;
padding-right: 5px;
}
.footer-distributed .footer-links .link-1:before {
content: none;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
/* If you don't want the footer to be responsive, remove these media queries */
#media (max-width: 880px) {
.footer-distributed{
font: bold 14px sans-serif;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
.contact-header{
text-align: center;
color: white;
}
function smoothScroll(target,duration){
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime){
if(startTime === null) startTime = currentTime;
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0,run);
if(timeElapsed < duration) requestAnimationFrame(animation);
console.log('timeElapsed : ' + timeElapsed + 'duration: ' + duration);
}
function ease(t, b, c, d) {
t /=d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t *(t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
var aboutBtn = document.querySelector('.about-button');
var aboutSection = document.querySelector('.about-section');
var classesBtn = document.querySelector('.classes-button');
var classesHeading = document.querySelector('.classes-header');
var ptBtn = document.querySelector('.pt-button');
var ptSection = document.querySelector('.pt-section');
var contactBtn = document.querySelector('.contact-button');
var contactSection = document.querySelector('.contact-section');
var cobBtn = document.querySelector('contactBtn');
aboutBtn.addEventListener('click', function(){
smoothScroll('.about-section', 1000);
});
aboutSection.addEventListener('click', function(){
smoothScroll('.about-button', 1000);
});
classesBtn.addEventListener('click', function(){
smoothScroll('.classes-header', 1000);
});
classesHeading.addEventListener('click', function(){
smoothScroll('.classes-button', 1000);
});
ptBtn.addEventListener('click', function(){
smoothScroll('.pt-section', 1000);
});
ptSection.addEventListener('click', function(){
smoothScroll('.pt-button', 1000);
});
contactBtn.addEventListener('click', function(){
smoothScroll('.contact-section', 1000);
});
contactSection.addEventListener('click', function(){
smoothScroll('.contact-button', 1000);
});
cobBtn.addEventListener('click', function(){
smoothScroll('.contact-section', 1000);
});

var cobBtn = document.querySelector('contactBtn');
should be
var cobBtn = document.querySelector('.contactBtn');
because "contactBtn" is a class name, I don't know about your code but I think you then add an event listener to that codeBtn element, which was returning null
in your case because it can't find an element with the tag name "contactBtn"
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
MDN

Having problem with Slick slider and Bootstrap (image is resized after using the Slick js function)

I am trying to create a product category container with a slick right & left carousel. However, using the slick js function my images get smaller in sizeenter image description hereenter image description here. I am using Bootstrap for classes (container-fluid, row, col-md-3 etc) everything looks good in shape but once I add the slick function (second slider) my product category images get smaller. I was trying to figure it out what is the issue but could not... any help will be appreciated
/*banner slider*/
$('.slider-one')
.not(".slick-intialized")
.slick({
autoplay: false,
autoplaySpeed: 3000,
dots: true,
prevArrow: ".site-slider .slider-btn .prev",
nextArrow: ".site-slider .slider-btn .next",
});
/*second slider*/
$('.slider-two')
.not(".slick-intialized")
.slick({
prevArrow: ".site-slider-two .prev",
nextArrow: ".site-slider-two .next",
slidesToShow:5,
slidesToScroll:1,
autoplaySpeed:3000
});
/*root varialbe*/
:root{
--light-gray: #2b3032a1;
--primary-color: #45ccb8;
--border: #2b303218;
--text-color: #ff686b;
--roboto: "Roboto", sans-serif;
--gugi: "Gugi", cursive;
--sofia: "Sofia", cursive;
}
/*Global css classes*/
.primary-color{
color: var(--primary-color);
}
.bg-primary-color{
background-color: var(--primary-color) !important;
}
.text-color{
color: var(--text-color);
}
.font-roboto{
font-family: var(--roboto);
}
.lightblue{
color: lightblue;
}
/*header*/
header{
background-color: var(--primary-color);
font-family: var(--roboto);
}
header .site-title{
font-family: var(--gugi);
}
.container .dropdown-toggle,
.container .dropdown-item{
font-size: 0.7em;
}
.header-links a{
font-size: 0.9em;
text-decoration: none;
color: white;
}
/*Slider one */
.site-slider{
position: relative;
}
.position-top{
position: absolute;
top: 50%;
}
.site-slider .slider-btn .prev,
.site-slider .slider-btn .next{
background-color: var(--primary-color);
padding: 1rem 1.5rem;
border-radius: 10rem;
color: white;
margin: 0 1rem;
opacity: 0;
transition: opacity 1s ease;
}
.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next{
opacity: 1;
}
.right-0{
right: 0;
}
/*slide dotd*/
.slick-dots li{
color: white;
}
.slick-dots li.slick-active{
transition: scale(2.5);
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
background-color: white;
border-radius: 100%;
}
/*slider two*/
.site-slider-two{
position: relative;
height: 30%;
}
.site-slider-two .product{
height: 25rem;
position: relative;
overflow: hidden;
}
.site-slider-two .product img{
width: 90%;
margin: auto;
}
.site-btn.btn-span{
padding: 0.8rem 1.9rem;
border-radius: 4rem;
border: 1px solid var(--primary-color);
background-color: white;
color: var(--light-gray);
}
.slider-two .slick-track .product:hover span{
background-color: var(--primary-color);
}
/*slider wrapper test*/
.post-slider{
border: 1px black solid;
position: relative;
}
.post-slider .post-wrapper{
width: 84%;
height: 350px;
margin: 0 auto;
border: 1px red dotted;
}
.post-slider .post-wrapper .post{
width: 300px;
height: 350px;
display: inline-block;
}
.post-slider .slider-title{
text-align: center;
margin: 30px auto;
}
.post-slider .post img{
text-align: center;
margin: 0 10px;
width: 480px;
height: 340px;
}
.post-slider .prev{
position: absolute;
top: 50%;
}
.post-slider .next{
position: absolute;
top: 50%;
}
.right-0{
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Store</title>
<!--Bootstrap CND-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Font Awesome CND-->
<script src="https://kit.fontawesome.com/36eac67c14.js" crossorigin="anonymous"></script>
<!--slick Slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!--animate css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<!--Google fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=Gugi&family=Lato&family=Roboto&family=Sofia&display=swap"
rel="stylesheet">
<!--Custom Stylesheet-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--header-->
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12">
<div class="btn-group">
<button class="btn border border-dark dropdown-toggle my-md-4 my-2 " data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
USD
</button>
<div class="dropdown-menu">
ERU-Euro
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center">
<h2 class="my-md-3 site-title text-white">Online Shopping</h2>
</div>
<div class="col-md-4 col-12 text-right">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
<!--/header-->
<main>
<!--banner slider-->
<div class="container-fluid p-0">
<div class="site-slider">
<div class="slider-one">
<div>
<img src="./assets/item-1.jpg" class="img-fluid" alt="Banner-1" />
</div>
<div>
<img src="./assets/item-2.jpg" class="img-fluid" alt="Banner-2" />
</div>
<div>
<img src="./assets/item-3.jpg" class="img-fluid" alt="Banner-3" />
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
</div>
</div>
</div>
<!--banner slider-->
<!--Second slider-->
<div class="container-fluid">
<div class="site-slider-two px-md-4">
<div class="row slider-two text-center">
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-1.jpg" class="img-fluid" alt="product 1">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-2.jpg" class="img-fluid" alt="product 2">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 3">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-4.jpg" class="img-fluid" alt="product 4">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-5.jpg" class="img-fluid" alt="product 5">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 5">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left fa-2x text-secondary"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right fa-2x text-secondary"></i></span>
</div>
</div>
</div>
<!--Second slider-->
</main>
<footer></footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<!--slick slider-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!--custom js-->
<script src="./js/main.js"></script>
</body>
</html>

you got col-md-2 (bootstrap CSS) class on your .slider-two > .product items. which gives the columns a low width setting and conflicts with the behaviour of the slick slider.
when removed it shall work better.
thats messed up. if possible clean up there.

Unable to obtain the id of the element using v-if

I am new to VueJS. I am developing an application using VueJS and Bootstrap. There is a div which I wish to render based on a condition.
I have been trying to use v-if on the div so that once the condition is true, the data property is set to true and the div gets displayed.
My code looks like this:
export default {
data(){
return {
detailsSectionOpen: false
}
},
methods:{
showDetails() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.add("col-xl-3");
showSection.classList.add("col-xl-9", "col-md-6");
showSection.classList.remove("col-xl-12", "col-md-6");
},
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="content" style="padding-top: 3px;">
<div class="row">
<div class="col-xl-12 col-md-6" id="show" style="padding-left: 0px;padding-right: 0px;">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;">Files</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="gridView === false" #click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="gridView === true" #click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr">
</div>
<div class="container-fluid">
<div style="width: 280px; height: 30px; margin-left: 15px; ">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Recent</p>
</div>
<!-- Recently used files section begins here -->
<div class="row" style="padding-right: 15px; padding-left: 15px;">
<div class="col-md-5ths col-xs-6" v-for="(file,index) in recentFiles">
<stats-card>
<div slot="header" class="header-rectangle" #contextmenu.prevent="$refs.menu.open">
<img :src="file.source" style=" height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" #contextmenu.prevent="$refs.menu.open" style="display: flex; flex-direction: column; justify-content: center;">
<div class="row" >
<div class="col-xl-9" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>{{file.name}}</span>
</div>
<div class="file-size-style" >
<span>{{file.size}} MB</span>
</div>
</div>
<div class="col-xl-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
<div v-show="!file.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
<i class='fas fa-users' id="image"></i>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<vue-context ref="menu">
<ul style="font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; ">
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fa fa-file' id="context-menu-icon"></i><span class="context-menu-span">Preview</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="fa fa-share-alt" id="context-menu-icon"></i><span class="context-menu-span">Share</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="fa fa-copy" id="context-menu-icon"></i><span class="context-menu-span">Copy/Move</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='far fa-star' id="context-menu-icon"></i><span class="context-menu-span">Add to Starred</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-cloud-download-alt' id="context-menu-icon"></i><span class="context-menu-span">Download</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-pencil-alt' id="context-menu-icon"></i><span class="context-menu-span">Rename</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-tag' id="context-menu-icon"></i><span class="context-menu-span">Tags</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="far fa-trash-alt" id="context-menu-icon"></i><span class="context-menu-span">Delete</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="far fa-chart-bar" id="context-menu-icon"></i><span class="context-menu-span">Access Stats</span></li>
</ul>
</vue-context>
</div>
<!-- Folder section begins here -->
<div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Folders</p>
</div>
<div v-if="gridView === true" class="row seven-cols" style="padding-right: 15px; padding-left: 15px;">
<div class="col-md-1" id="no-padding" v-for="(folder,index) in folders">
<stats-card>
<div slot="header" :data-key="index" class="folder-rectangle" #click="folderSelected=index" :class="{'folder-selected':folderSelected==index}">
<div class="row">
<div class="col-xl-3" style="padding-right: 15px;padding-left: 15px;">
<div class="clearfix" v-if="folder.shared" style="margin-top: 8px; margin-left: 10px;">
<i class="material-icons" id="folder-image"></i>
</div>
<div class="clearfix" style="margin-top: 8px; margin-left: 10px;" v-else>
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-xl-9" style="padding-left: 7px;padding-right: 7px;padding-top: 7px;padding-bottom: 7px;">
<div class="file-name-style" style="padding-right: 5px; padding-left: 5px;">
<span>{{folder.name}}</span>
</div>
<div class="file-size-style" style="padding-bottom: 5px;padding-top: 10px;padding-left: 5px;">
<span>{{folder.numFiles}} files</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
</div>
<!-- Files section begins here -->
<div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Files</p>
</div>
<div v-if="gridView === true" class="row" style="padding-bottom: 15px; margin-bottom: 20px; padding-right: 15px; padding-left: 15px;">
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="https://image.flaticon.com/icons/png/512/136/136526.png" style="height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<i class="far fa-file-image" style=" height: 50px; margin-top: 50px; color:#4CAF50; font-size: 40px;"></i>
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="http://www.dap.asn.au/wp-content/uploads/2017/01/pdfLogo.png" style=" height: 50px; margin-top: 50px;">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="https://www.cleverducks.com/wp-content/uploads/2018/01/Excel-Icon.png" style="height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
</div>
<!-- List View section begins here -->
<list-view :gridView="gridView" :folders="folders">
</list-view>
</div>
</div>
<!-- File Details section begins here -->
<div v-if="detailsSectionOpen" id="details" ref="detailsSection">
<div class="content">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="pull-right">
<button class="btn" #click="closeDetailsSection">
<i class="fa fa-close">
</i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr-details">
</div>
<div class="container-fluid">
<div style="width: 280px; height: 30px;">
<p style="color: #424242;width: 239px;height: 30px;font-family: 'Source Sans Pro'; font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-align: left;">Details</p>
</div>
<div class="row">
<div class="col">
<div style="height: 100px; width: 100px; margin: 0 auto" >
<i class="fas fa-folder" style="font-size: 100px; color: #878D99"></i>
</div>
<div style="max-width: 100%;">
<ul style="list-style: none;padding-left: 20px;padding-right: 20px; padding-top: 60px;padding-bottom: 60px;" class="details-ul">
<li>Shared with: ~ 15 people</li>
<li>Name: Folder Name</li>
<li>Type: Folder</li>
<li>Files: 20</li>
<li>Location: Home</li>
<li>Owner: John</li>
<li>Created: March 10, 2018</li>
<li>Opened: March 10, 2018, 7 PM by Jenny</li>
<li>Modified: March 10, 2018, by me</li>
<li>Downloaded: March 10, 2018, by John </li>
<li>Retention Policy: None</li>
<li>Tags: Add</li>
<li>Description: Add</li>
</ul>
</div>
<div style="height: 100px; width: 100px; margin: 0 auto" >
<button class="plus-circle-btn"><i class="fa fa-plus-circle"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am able to see the div being rendered on the DOM when the method showDetails() is called.
But, when I try getting the element by its ID, the result is null. So, document.getElementById('details') returns null.
I think it has something to do with the reactivity in Vue and how v-if works. Can someone please help me resolve this issue?
Thank you!

v-if adds/removes an element from the DOM. You can't show or hide something that doesn't exist in the DOM.
Trying to hide or show another DOM element based on a different element's v-if doesn't make any sense as you could simply add another v-if="condition" and it would work the same way.
If you really can't add another check to the DOM then you should Watch the same data element in VUE that the if is watching...
Do this by adding a class as that's better for toggles since ID's are only supposed to be used once per page. You can add this class anywhere in the DOM based on the Vue state.
<div v-if="visibleCheck">
This element will be visible if visibleCheck = true
</div>
<div id="anotherElement" v-bind:class="visibleCheck ? 'isVisble' : 'notVisible'">
If visibleCheck = true this div will have a class .isVisible
If visibleCheck = false/null this div will have a class .notVisible
</div>
Then do something with those classes:
.isVisible {
display:block;
}
.notVisible {
display:none;
}
The whole point of Vue is NOT to watch the DOM for changes but to base the DOM changes on the data
Using your example:
<div id="whatever" v-bind:class="detailsSectionOpen ? 'col-xl-9' : 'col-xl-12'">
stuff
</div>

You can try using $nextTick, it will be called after the component re-render:
showDetails() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.add("col-xl-3");
showSection.classList.add("col-xl-9", "col-md-6");
showSection.classList.remove("col-xl-12", "col-md-6");
})
}
}