Challenges with creating a responsive layout for a Bootstrap timeline

I've been utilizing a Bootstrap-based sample timeline, and while it's functional overall, some layout elements become misaligned when resizing the window. I've made adjustments to the code so that all timeline items are positioned to the right of the line itself, but now I'm encountering issues with aligning the icons for each item and the final icon at the end.

Apologies for the cluttered fiddle, but you can view it here:

http://jsfiddle.net/36yt7srz/

As you can see, the final circle at the bottom roughly aligns with the timeline on small window sizes, but loses synchronization upon resizing. While I could address this with media queries, it seems like the circle would still be out-of-line at certain window dimensions.

I'm seeking a solution to have the circle smoothly track along the line.

Here is the HTML structure:

<!-- base content -->
        <div class="col-md-12 content page">

      <!-- header icon -->
      <div class="col-xs-3">

        <img class="img-responsive" src="http://s21.postimg.org/s3hybqfwz/icon.jpg">

      </div>

      <!-- header text -->
      <div class="col-xs-9 schedule-header-text">

        <img class="img-responsive" src="http://s27.postimg.org/4y34y273z/text.jpg">

      </div>

      <!-- Timeline -->
      <div class="col-xs-12">
        <ul class="timeline">

          <li class="timeline-inverted">
            <div class="tl-circ"></div>
            <div class="timeline-panel">
              <div class="tl-heading">
                <h4>Date</h4>
              </div>
              <div class="tl-body">
                <p>Content</p>
                <p><small class="text-muted"><i class="fa fa-map-marker"></i> Location</small></p>
              </div>
            </div>
          </li>

          <li class="timeline-inverted">
            <div class="tl-circ"></div>
            <div class="timeline-panel">
              <div class="tl-heading">
                <h4>Date</h4>
              </div>
              <div class="tl-body">
                <p>Content</p>
                <p><small class="text-muted"><i class="fa fa-map-marker"></i> Location</small></p>
              </div>
            </div>
          </li>

          <li class="timeline-inverted">
            <div class="tl-circ-empty"></div>
          </li>

        </ul>
      </div>

Below is the corresponding CSS:

/** timeline box structure **/
.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 2px;
  background-color: #504f4f;
  left: 5%;
}

.timeline li {
  margin-bottom: 25px;
  position: relative;
}

.timeline li:before, .timeline li:after {
  content: " ";
  display: table;
}
.timeline li:after {
  clear: both;
}
.timeline li:before, .timeline li:after {
  content: " ";
  display: table;
}

/** timeline panels **/
.timeline li .timeline-panel {
  width: 90%;
  float: left;
  background: rgba(0,0,0,0.6);
  padding: 10px;
  position: relative;
  top: 23px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
  top:0;
  right:0;
  display: none;
  border: 0;
}

.timeline li.timeline-inverted .timeline-panel {
  float: right;
}

.timeline li.timeline-inverted .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}

.timeline li.timeline-inverted .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}


/** timeline circle icons **/
.timeline li .tl-circ {
  position: absolute;
  top: 23px;
  left: 5%;
  text-align: center;
  background: url(../img/schedule-icon.png);
  color: #fff;
  width: 35px;
  height: 35px;
  margin-left: -13px;
  z-index: 99999;
}

.timeline li .tl-circ-empty {
    position: absolute;
  top: 35px;
  left: 46px;
  text-align: center;
  background: #434343;
  width: 15px;
  height: 15px;
  margin-left: -13px;
  border: 3px solid #434343;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  z-index: 99999;
}

/** timeline content **/

.tl-heading h4 {
  margin: 0 0 10px 0;
  color: #fafafa;
}

.tl-body p, .tl-body ul {
  margin-bottom: 0;
  color: #fafafa;
}

.tl-body > p + p {
  margin-top: 5px;
}

/** media queries **/
@media (max-width: 991px) {
  .timeline li .timeline-panel {
    width: 90%;
  }
}

@media (max-width: 700px) {
  .page-header h1 { font-size: 1.8em; }

  ul.timeline:before {
    left: 40px;
  }

  ul.timeline li .timeline-panel {
    width: calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
  }

  ul.timeline li .tl-circ {
    top: 22px;
    left: 22px;
    margin-left: 0;

  }

  ul.timeline > li > .timeline-panel {
    float: right;
  }

  ul.timeline > li > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
  }

  ul.timeline > li > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
  }
}

.schedule-header-text {
    padding-top: 12px;
}

.schedule-header-text img {
    max-width: 75%;
}

.content.page {
    padding: 5%;
}
htmlcsstwitter-bootstrap

Answer №1

It's possible that I may have misunderstood your question, but here is the solution I came up with to align items (I changed the color for better visibility)

.timeline li .tl-circ-empty {
  position: absolute;
  top: 35px;
  left: 5%;
  text-align: center;
  background: red;
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  border: 3px solid red;
  border-radius: 50%;
  z-index: 99999;
}

In addition, I made the following adjustment

@media (max-width: 700px){
  ul.timeline li .tl-circ-empty {
    left: 22px;
    margin-left: 10px;
  }
}

I'm in a hurry at the moment. Please let me know if this resolved your query.

EDIT1

Note that due to time constraints, I didn't thoroughly review your css. I concentrated on modifying the .tl-circ-empty class to resolve the issue without impacting the entire css structure extensively.

EDIT2

I recall facing similar challenges when creating Vertical Timelines myself. I found valuable insights by referring to this resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The checkbox fails to display as checked when the value is set to true

I have integrated iCheck into my angular application. It's working well, except for one issue: when I set the checkbox value to true in my controller, it doesn't show up as checked when the page is loaded. Controller $scope.basicIntake = {}; $s ...

javascripthtmlangularjs

Is there a way to arrange the components of my form so that the questions are positioned on the left side and the choices are displayed on the right

As I am creating a form, my goal is to align the information within it in a way that places the questions on the left side and the options on the right. I have experimented with utilizing IDs, centering them, and adjusting their positioning from left to r ...

htmlcssformsalignment

Is there a way to repurpose a JavaScript object that gets sent back to the client upon page loading?

Upon initial page load, an AJAX request fetches a list of JavaScript objects which display only one value each. The page includes buttons to expand each item and reveal the remaining values. Originally, I used another AJAX call to retrieve individual objec ...

javascripthtmlnode.jsajaxexpress

Increase division height when mouse hovers over it

I want the height of the div to be 50px by default and change to 300px onmouseover. I have implemented this as follows: <style type="text/css"> #div1{ height:50px; overflow:hidden; } #div1:hover{ height:300px; } </style> <body> <div i ...

javascriptjqueryhtmlcss

Bootstrap - extra spacing

Utilizing bootstrap, I have implemented two div elements in my HTML code: <div class="container"> <div class="col-12 circle lg-circle"> <div class="col-12 circle sm-circle"> </div> </div> </div> The corresp ...

cssbootstrap-4

Incorporating fresh data from a node.js backend to refresh a webpage section

I'm currently working on creating an app that can retrieve the song a user is currently listening to using a web scraper. While I've managed to direct users to the page and display the current song title, they must manually refresh the entire pag ...

htmlcssnode.jsexpressejs

Header element not keeping the navbar at the bottom

My goal is to attach this navigation bar to the bottom of a header, but it's sticking to the top instead. I want the navigation to remain at the bottom of the header even when the user scrolls down. Currently, both the header and navigation are set t ...

htmlcss

Struggling to make jQuery apply .css("display", "block") upon clicking a link

I am having trouble with getting jQuery to display CSS properties when a link is clicked on. After testing the CSS properties, I found that setting the display to "block" in the style sheet works as expected. However, if I set the initial CSS display to " ...

jqueryhtmlcss

Trouble with Angular not Displaying BootStrap 5.0 Styles

Trying to implement both BootStrap and Angular into the project, I successfully applied the styles by adding the following line in the index file: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="sty ...

angulartwitter-bootstrapangular-clibootstrap-5

Swap out the div element with a loading.gif image right before the page finishes loading, then pause for 3 seconds before getting rid of

My challenge involves a select drop down that is being dynamically built. To handle this, I have implemented a setTimeout function to change the selected option after a 3-second delay. This allows the select element to load first before I manipulate it. Ho ...

jqueryhtmlcss

Encountered an issue while trying to reset the dropdown menu values on a Dash application when utilizing a clear button

I'm attempting to add a clear button for users to reset the values in a dropdown menu. However, when I run the application, I encounter the following error preventing me from selecting an option in the dropdown: Unable to access property 'leng ...

pythonhtmlcssweb-applicationsplotly-dash

What is the process of initializing divs in DataTables?

My application has a DataTable installed, but I encountered an error message stating "DataTables warning: Non-table node initialisation (DIV). For more details about this error, please visit http://datatables.net/tn/2". I'm aware that DataTables is d ...

javascriptjqueryhtmlcssdatatables

Column alignment in Bootstrap 4

My objective is to create a page consisting of multiple rows, each containing a label column, a control column, and an optional unit of measure column. I aim for the label column to be consistent across all rows, adjusting to fit the longest label. To achi ...

htmljquerycssbootstrap-4

Generating a partially translucent image overlay

I am currently working on a one-page WordPress theme. Each section of the page includes a header with an image and an overlay. The header consists of a background image, with a wrap-width image inside. Below that, there is a semi-transparent png image tha ...

htmlcsswordpressimage

Incorporating commas as a number is typed by the user, such as 1,000, 10,000, 100,000, 1,000,000, 10,000,000,

As a beginner, I researched and managed to develop this code successfully. One issue I'm facing is that when users input numbers, there are no commas separating the thousands or millions. Does anyone have suggestions on how to automatically add commas ...

javascripthtmluser-input

Adjust the form size to fit the screen using bootstrap

I have a background, but I'm also attempting to make my form fit on the screen without extending beyond it. Here is the code for setting the background image: <style> body, html { height: 100%; margin: 0; } .bg { /* The image use ...

phphtmlcssbootstrap-4

Trigger a click event to alter the child div elements

I have a <div> that expands when clicked and shrinks back when clicked again. Inside this div are images that should only appear once the div expands. My issue is ensuring that all images except the first one are hidden until the div expands. https: ...

javascripthtmlcss

What is the best way to position a button at the bottom of an image?

I am facing an issue with the following code snippet: * { box-sizing: border-box; } .wrapper { position: relative; /* border:1px solid blue; */ width: 250px; } .text { position: absolute; border:1px solid red; bottom: 0px; ...

css

Seamless transitioning between HTML sections

I understand the concept of animating transitions in HTML sections to create a smoother effect. For example, this website: http://en.wikipedia.org/wiki/Dobroslav_Jevdevic Utilizes HTML sections. Clicking on a link from the table of contents takes you di ...

javascriptjqueryhtmlsections

Implement an overflow property at the end of an Angular 2 animation

To create a smooth slide in and out animation, I have implemented the following code: animations: [ trigger('assignState', [ state('maximize', style({ height: '*', })), ...

cssangularanimation