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
});
});

Div's Content Autoscaling with another Div Content

I would like to avoid this CSS Autoscaling bug that leaves huge blanks for long movie names. Would someone help me how to solve it? Here is my DIV and CSS code.
HTML:
<div class="col-md-2 w3l-movie-gride-agile">
<a href="single.html" class="hvr-shutter-out-horizontal"><img src="imagen/malefica.jpg" class="img-responsive" />
<div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
</a>
<div class="mid-1 agileits_w3layouts_mid_1_home">
<div class="w3l-movie-text">
<h6>Maléfica: La dueña de Mal</h6>
</div>
<div class="mid-2 agile_mid_2_home">
<p>2019</p>
<div class="block-stars">
<ul class="w3l-ratings">
<li><i class="fa fa-star" aria-hidden="true"></i>7.4</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="ribben">
<p>NEW</p>
</div>
</div>
CSS:
.w3l-movie-gride-agile {
text-align: center;
box-shadow: 0px 0px 10px rgb(255 255 255 / 35%);
margin-right: 0%;
margin-bottom: 3%;
position: relative;
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
}

You can use flexbox to solve the issue
.w3l-movie-gride-agile{ display:flex; justify-content:space-around; align-items:space-between; width:100%; height:500px}

Responsive custom expanding preview

I am trying to build an expanding preview like http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/.
But I need to customize it based on my requirement.
Please check this fiddle.
Problems I am facing are:
The pointer does not point to the image properly. (it points but hides behind the box)
When clicking on first image, all the elements to the right shifts down.
Along with that I would also like to ask, can we fit all the 8 circular div in a single row?
Thank you.
jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});
.wrap {
max-width: 100%;
margin: auto;
}
.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
margin: 0 0 0 -6px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}
.tab {
display: none;
clear: both;
margin: 0 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="wrap">
<div class="col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">1</div>
</a>
</div>
<div id="tab1" class="tab">Tab 1</div>
<div class="col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">2</div>
</a>
</div>
<div id="tab2" class="tab">Tab 2</div>
<div class="col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">3</div>
</a>
</div>
<div id="tab3" class="tab">Tab 3</div>
<div class="col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">4</div>
</a>
</div>
<div id="tab4" class="tab">Tab 4</div>
<div class="col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">5</div>
</a>
</div>
<div id="tab5" class="tab">Tab 5</div>
<div class="col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">6</div>
</a>
</div>
<div id="tab6" class="tab">Tab 6</div>
<div class="col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">7</div>
</a>
</div>
<div id="tab7" class="tab">Tab 7</div>
<div class="col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">8</div>
</a>
</div>
<div id="tab8" class="tab">Tab 8</div>
</div>

Please check this fiddle: https://jsfiddle.net/LyL8vkmr/4/
I put each col-sm-2 inside a <div class="row"></div> and I put all the tabs in a separate <div class="row"></div>. Now when you click a circle, it opens a tab in the row underneath it and pushes all the circles in the next row. However it still doesn't work perfectly because when you resize it to small size and click on a circle, the tab opens up at the very bottom of the row and you can't see it easily.
Also note I changed col-sm-2 to col-sm-1 since you said you wanted 8 divs in a row. The only problem with this is that it doesn't stretch 100% across. If you want 8 columns to stretch all the way across then you need to use a custom version of bootstrap. Just go here and enter 8 for the #grid-columns field.

My Javascript code doesn't work properly

var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer() {
audio = new Audio();
audio.src = "nineDays.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
mutebtn = document.getElementById("mutebtn");
// Add Event Handling
playbtn.addEventListener("click", playPause);
mutebtn.addEventListener("click", mute);
// Functions
function playPause() {
if (audio.paused) {
audio.play();
playbtn.style.background = "url(video_pause.png) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(play.png) no-repeat";
}
}
function mute() {
if (audio.muted) {
audio.muted = false;
mutebtn.style.background = "url(speaker.png) no-repeat";
} else {
audio.muted = true;
mutebtn.style.background = "url(mute.png) no-repeat";
}
}
}
window.addEventListener("load", initAudioPlayer);
body {
background: #282828;
color: white;
font-family: sans-serif;
}
.nav {
display: flex;
justify-content: flex-end;
position: absolute;
width: 100%;
top: 0;
left: 0;
list-style-type: none;
}
li a {
color: white;
text-decoration: none;
padding: 0 10px;
}
h1 {
font-size: 13px;
margin-bottom: 80%;
margin-right: 50%;
font-family: 'Montserrat';
}
.container {
padding-top: 8%;
}
button {
border: none;
cursor: pointer;
outline: none;
}
button#playpausebtn {
background: url(video_pause.png) center center no-repeat;
background-size: cover;
margin-left: 20px;
marging-top: 35px;
width: 20px;
height: 15px;
}
button#mutebtn {
background: url(speaker.png) center center no-repeat;
background-size: cover;
margin-top: 35px;
width: 25px;
height: 20px;
}
.soundNav {
position: absolute;
width: 20%;
height: 30px;
z-index: 99999;
}
<body>
<div class="soundNav">
<button id="playpausebtn"></button>
<button id="mutebtn"></button>
</div>
<ul class="nav nav-tabs">
<li role="presentation">Home
</li>
<li role="presentation">About me
</li>
<li role="presentation" class="active">Work
</li>
<li role="presentation">Get In Touch
</li>
</ul>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<!--Indicators dot nav-->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
<li data-target="#my-slider" data-slide-to="3"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> © Ed Sheeran Concert at Blossom Center</br>
August 2015
</h1>
</div>
</div>
<div class="item">
<img src="5.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item">
<img src="6.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item ">
<img src="2.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </h1>
</div>
</div>
<!--controls or next and prev buttons-->
<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to understand what the problem is- whenever someone opens the page, the music starts. I want the user to be able to pause or mute the music whenever they want to. And that works fine, except my icons won't show, it's as they are hidden. Everything is in the same folder. I was thinking to use glyphicons, but I don't know how to use them inside of the javascript.

the javascript style syntax is littlebit different. use
mutebtn.style.backgroundImage = "url('mute.png') no-repeat";
and make sure ./mute.png exists and is readable

css bootstrap slider menu fix

So i'm working in this bootstrap carousel, now i have this code working, but i need to fix some issues.
1) make the menu responsive.
2) make the button selected taller than the others.
i tried a lot of thigs but i haven't found the solution yet, so i came here, maybe someone can help me, thank you so much!
This is the image as an example
the code is in the snippet.
$(document).ready(function(ev){
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel .controls li.active').removeClass('active');
$('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
/*margin: auto;*/
/*border: 2px solid green;*/
}
.carrusel {
width: 100%;
height: 40px;
/*margin: auto;*/
border: 3px solid red;
float:right;
margin: 0px 0px 00px 0px;
/*background-color: black;*/
}
.slide{
/*border: 2px solid #093845;*/
width: auto;
}
/*nav slider*/
.navi ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
border: 1px solid red;
height: 50px;
}
.navi li {
float: left;
border: 1px solid red;
width: 210px;
}
.navi li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navi li a:hover:not(.active) {
background-color: #ddd;
}
.navi li a.active {
color: white;
background-color: #4CAF50;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Tabbed Slider Carousel (inspired by sevenx.de) - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
</div>
</div>
<!-- Indicators -->
<div class="navi">
<ul class="">
<li data-target="#myCarousel" data-slide-to="0" class="boton active">Button 1</li>
<li data-target="#myCarousel" data-slide-to="1" class="boton ">Button 1</li>
<li data-target="#myCarousel" data-slide-to="2" class="boton">Button 1</li>
<li data-target="#myCarousel" data-slide-to="3" class="boton">Button 1</li>
<li data-target="#myCarousel" data-slide-to="4" class="boton">Button 1</li>
</ul>
</div>
</div>
</body>
</html>

Ok so I know this is probably a little more than you asked for but I figured I would help out and make this fully responsive for you. I left in the carousel captions and headings just in case you wanted to use them for future use but if not you can just take them out. So what I like to do with the bootstrap carousels is give the carousel item a padding-bottom of a percentage and then mess with this percentage until you get your desired height. Then I like to just give each item a background image of the image that you want to put in your carousel because not all images have the same aspect ratio and you will run into problems with images being skewed otherwise. If you don't want to use the background image method you can just use your method but I figured I would throw this in there because it works best for responsive design. So i give each carousel item a class eg. first-item, second item, third-item and so on and then give then all a backgorund image of whatever your slide image was. Then we will just put your nav underneath the carousel and your all set. Also you will want to add data-interval="false" to your #myCarousel div because when you click on one of the slides it will start to cycle though the slides and your active tabs will still be on the one that you clicked on. Removing active classes while the carousel is in auto interval is a whole different set of jquery markup. Also I have set your carousel nav buttons to 20% because there are 5 of them. If you want them to be a different percentages then add a media query to make them a bigger size like and you will also have to change the carousel-nav height and maybe not have the active button apear bigger as well:
#media screen and (max-width: 767px){
.carousel-nav li{width: 100%;)
}
Here is a working Fiddle demo Fiddle
So here is the markup:
Html:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active first-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 1</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item second-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 2</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item third-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 3</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item fourth-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 4</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item fifth-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 5</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
<ul class="carousel-nav">
<li class="active" data-target="#myCarousel" data-slide-to="0"><button>Button 1</button></li>
<li data-target="#myCarousel" data-slide-to="1"><button>Button 2</button></li>
<li data-target="#myCarousel" data-slide-to="2"><button>Button 3</button></li>
<li data-target="#myCarousel" data-slide-to="3"><button>Button 4</button></li>
<li data-target="#myCarousel" data-slide-to="4"><button>Button 5</button></li>
</ul>
The Css:
#myCarousel .item{
padding-bottom: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 250px;
}
#myCarousel .first-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .second-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .third-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fourth-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fifth-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .carousel-heading{font-size: 40px;}
.carousel-nav{
list-style-type: none;
padding: 0;
margin: 0;
height: 50px;
}
.carousel-nav li{
height: 100%;
width: 20%;
float: left;
}
.carousel-nav li button,.carousel-nav li button:focus{
height: 100%;
border: 1px solid red;
width: 100%;
position: relative;
z-index: 2;
outline: 0;
}
.carousel-nav li.active button, .carousel-nav.active li button:focus{
height: 60px;
margin-top: -10px;
outline: 0;
}
/*Responsive Styles*/
#media screen and (max-width: 767px){
#myCarousel .carousel-heading{font-size: 18px;}
#myCarousel .carousel-description{font-size: 12px;}
#myCarousel .btn-primary{font-size: 14px;}
}
And your jquery:
Note: this may require you to use a newer version of jquery so you may want to add this instead of 1.11 in you head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
then the jquery code:
$(document).on('click', '.carousel-nav button', function() {
$('.carousel-nav li').removeClass('active');
$(this).parent().addClass('active');
});

Change height to auto in the class ".navi ul" so it will be like
.navi ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
border: 1px solid red;
height: auto;
}
Change width of buttons to 20% in ".navi li" class so it will be like
.navi li {
float: left;
border: 1px solid red;
width: 20%;
}
and add one more class for selected button
.navi li.active a {
background-color: white;
border: 1px solid green;
height: 11%;
margin: -15px 0 0 -2px;
position: absolute;
width: 19%;
}

First important thing to note is that, the JavaScript you mentioned doesn't work as per your markup. Specifically, your active classes are not dynamically changing when the slides move. I have modified the JS code to make it work.
$(document).ready(function(ev){
$('#myCarousel').on('slide.bs.carousel', function (evt) {
$('.navi li.active').removeClass('active');
$('.navi li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
Also there is a small mistake on your CSS. The active class is applied on the <li> tag and not the <a>, so the active code should be changed to
.navi li.active {
background: blue;
color: white;
}
and NOT .navi li a.active.
And to scale the buttons when active, you can make use of the transform: scale(). Like so
.navi li.active {
background: blue;
color: white;
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari */
transform: scale(1.1);
}