#StackBounty: #css #twitter-bootstrap #css3 #bootstrap-4 #media-queries Mobile issue , Modify Bootstrap classes or wrong media query

Bounty: 50

As you can see right away my media query is becoming a mess. I am creating this timeline with bullets and catching myself writing too many media queries trying to make the bullet align to the timeline

enter image description here

I am very much in the belief that I made a mistake somewhere. Either in css part on the non-media query, maybe in the position absolute area.i just can’t nail the alignment. My requirement is not any specific screen sizes so, I have to make it work on all of them to the best, I am testing by making the browser width smaller and smaller. Is there a bootstrap solution to this? Am I writing the media query in a wrong way?

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”false”>

<

div class=”snippet-code”>

html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
.project-methodology-wrap {
  padding: 5rem 0;
 /*========== Media queries ==========*/
}
.project-methodology-wrap .methodologyBullet::before {
  content: '';
  width: 25px;
  height: 25px;
  background: #d4272e;
  position: absolute;
  border-radius: 30px;
  left: 26px;
  top: 0px;
  opacity: 0;
}
.project-methodology-wrap .methodologyBullet::after {
  content: '';
  width: 12px;
  height: 12px;
  background: #d4272e;
  position: absolute;
  border-radius: 30px;
  left: 33px;
  top: 2px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::before {
  opacity: 1;
  transition-duration: 0.5s;
  left: 26px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::after {
  border: 5px solid #fff;
  width: 21px;
  height: 21px;
  left: 28px;
}
.project-methodology-wrap .project-methodology-listCount, .project-methodology-wrap .methodologyBullet {
  position: absolute;
  left: 0;
}
.project-methodology-wrap .project-methodology-leftContent {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.project-methodology-wrap .project-methodology-rightContent {
  position: relative;
  overflow: hidden;
}
.project-methodology-wrap .project-methodology-rightContent:before {
  content: "";
  height: 100%;
  width: 8px;
  position: absolute;
  background-color: #f1f2f6;
  left: 5.2%;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list {
  position: relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  padding-left: 80px;
  margin-bottom: 3rem;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list .project-methodology-listContent {
  opacity: 0.2;
  transition-duration: 0.4s;
  -webkit-transform: none;
  transform: none;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list.active .project-methodology-listContent {
  opacity: 1;
}
@media only screen and (min-width: 1201px) and (max-width: 1280px) {
  .project-methodology-wrap .methodologyBullet {
    left: 0;
 }
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  .project-methodology-wrap .methodologyBullet {
    left: -1.4%;
 }
}
@media only screen and (min-width: 800px) and (max-width: 899px) {
  .project-methodology-wrap .methodologyBullet {
    left: 1.4%;
 }
}
@media only screen and (min-width: 768px) and (max-width: 799px) {
  .project-methodology-wrap .methodologyBullet {
    left: -4.2%;
 }
}
@media only screen and (max-width: 736px) {
  .project-methodology-wrap .methodologyBullet {
    left: -0.2%;
 }
}
@media only screen and (max-width: 640px) {
  .project-methodology-wrap .methodologyBullet {
    left: -0.2%;
 }
}
@media only screen and (max-width: 600px) {
  .project-methodology-wrap .methodologyBullet {
    left: -0.4%;
 }
}
@media only screen and (max-width: 570px) {
  .project-methodology-wrap .methodologyBullet {
    left: 0%;
 }
}
@media only screen and (max-width: 533px) {
  .project-methodology-wrap .methodologyBullet {
    left: -0.5%;
 }
}
@media only screen and (max-width: 480px) {
  .project-methodology-wrap .methodologyBullet {
    left: -1.3%;
 }
}
@media only screen and (max-width: 414px) {
  .project-methodology-wrap .methodologyBullet {
    left: -2.5%;
 }
}
@media only screen and (max-width: 384px) {
  .project-methodology-wrap .methodologyBullet {
    left: -3.4%;
 }
}
@media only screen and (max-width: 370px) {
  .project-methodology-wrap .methodologyBullet {
    left: -4.1%;
 }
}
@media only screen and (max-width: 320px) {
  .project-methodology-wrap .methodologyBullet {
    left: -5.4%;
 }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    https://code.jquery.com/jquery-3.3.1.js
    https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js
    https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
    http://./index.js

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="./style/index.css">


</head>

<body>
    
    <section class="project-methodology-wrap">
        

title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, eum deserunt perferendis asperiores esse temporibus est numquam repellat doloremque suscipit enim quod nisi nam cum ea quam expedita quidem velit.
<img class="img-fluid pt-5 pb-5 pr-5" src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1"> </div> </div>
 

1

Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</div>
 

2

Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</div>
 

3

Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</div> </div> </div> </div> </div> </section> </body> </html>