My media query seems to be getting out of control as I attempt to create a timeline with bullets. I find myself adding too many queries in an effort to align the bullets properly along the timeline.
https://i.sstatic.net/Apav5.png
I strongly believe that I've made a mistake somewhere, either in the CSS portion outside of the media query or perhaps within the position absolute area. I just can't seem to get the alignment right. Since my requirement is not specific to certain screen sizes, I need to ensure it works well on all screens. To test, I'm shrinking the browser width continually. Is there a Bootstrap solution for this? Am I approaching the media query incorrectly?
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 ==========*/
}
... (continues)
<!DOCTYPE html>
<html lang="en">
... (content continues)
I am relatively new to CSS and mobile-first design, and here is how my code currently looks.