Fixing Bootstrap's Timeline Component

I've created a Bootstrap timeline that works well on mobile and small screens, but encounters some issues on larger devices. You can view it at https://codepen.io/irshad437/pen/rLvxxa. Feel free to resize your window to test its functionality, which should be consistent across all devices.
Please check it out on codepen using the provided link.

Code:

<div class="panel panel-default">
  <!-- /.panel-heading -->
  <div class="panel-body">
    <ul class="timeline">
      <li class="timeline-inverted">
        <div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
        </div>
        <div class="timeline-panel">
          <div class="timeline-heading">
            <h4 class="timeline-title">Lorem ipsum dolor</h4>
          </div>
        </div>
      </li>

      ...
      
    </ul>
  </div>
  <!-- /.panel-body -->
</div>


CSS:

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

...
htmlcsstwitter-bootstrap-3timeline

Answer №1

The calculated width for .timeline-panel has been provided up to a resolution of 767px. For other devices, the width is set to 46%, causing a misalignment with the icon.

Proposed Solution #1

Consider setting a calculated width for .timeline-panel across all devices. Remove the calc function from (min-width:767px) and include it in the top declaration instead.

ul.timeline > li > .timeline-panel {
    float: left;
    position: relative;
    /*width: 46%; // consider removing this or provide a fallback */
    padding: 30px 30px 20px 0px;
    width: calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
 }

Alternative Solution #2

To address the alignment issue, remove the width specification for .timeline-panel under (min-width:767px). Update the top declaration as follows:

@media(max-width:767px) {
     //remove
     /* ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
      } */ 
}

.timeline > li > .timeline-panel {
    float: left;
    position: relative;
    width: 100%;
    padding: 30px 30px 20px 100px;
}

The second approach is recommended. You can view the corrected code on CodePen via the following link: https://codepen.io/anon/pen/bZrqGO

Thank you!

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

Incorporating a text box underneath the model image

My application currently utilizes a grid gallery that perfectly fits my needs. However, there are two specific changes I need to make in order for it to be complete for my purpose. Unfortunately, I am struggling to figure out how to implement these changes ...

javascriptjqueryhtmlcssgallery

The Forward and Back Buttons respond based on the current position of the caret

Exploring the concept of a Keypad-Login. I am trying to create Back and Forward buttons. However, the back and forward buttons are currently inserting the letters at the end of the input value instead of at the caret position. The input field is disabled, ...

javascripthtmlbuttoninputonclick

Unable to extract HTML text using Selenium Java

Here is the HTML code I am working with: <span id="slotTotal"> <span id="slotUsed">4</span> /16 </span> I am trying to extract the text "/16" but encountering an issue when using this code: slotTot = driver.findElem ...

javahtmlseleniumgettext

Scrolling is disabled when using a full-screen background

My current issue involves a full screen background that is functioning properly when the window is resized, but it has caused a problem where scrolling is disabled when the page is longer than the window size. The content just gets cut off. Is there a way ...

htmlcssbackgroundbackground-image

Is your PHP random advertisement feature malfunctioning?

<div id="bannerAd"> <?php //THIS SCRIPT RANDOMLY SELECTS AN AD. $randomAd = rand(1,3); switch($randomAd) { case "1": $adLink = "/sale.php"; $imageFile = "/images/saleAd.png"; ...

phphtml

When hovering over a div, reveal another div on top of a third div

Imagine two adjacent divs, A on the left and B on the right with some other elements in between. Is it possible to have a third div, C, appear over div A when hovering over div B? I can control the display property using CSS, but I am unsure how to make d ...

javascriptcss

Identify the hover event within a div element

There is a parent div with a child div inside it. I want the border color and text of the child div to turn white when a user hovers over the parent div. For instance, in the example provided, the text inside the box that says No score, yet click and subm ...

htmlcsstailwind-css

Issues with Bootstrap Modal Checkbox Functionality

Issue with Bootstrap modal checkbox functionality when the checkbox is selected The desired behavior is for the bootstrap modal popup to be triggered upon clicking the checkbox Bootstrap Version: 3.3.6 Jquery Version: 2.1.3 $(function() { $(&ap ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

Positioning html images to overlap each other without losing the ability to click

Currently, I am facing a challenge with positioning two images over each other. The back image should be at the bottom, while the center image needs to be on top of it. Additionally, there is a requirement for placing a random link (in this case google.com ...

javascripthtmlcsspositioncss-position

Having trouble selecting an option within an options wrapper using Python's Selenium?

I'm currently facing an issue with selecting an option in a popup bubble (I am unsure of the exact type of popup it is). I don't have a preference for which option to choose, I just need to click one of them. Here is how it appears in the code: & ...

pythonhtmlcssselenium

Design a responsive layout featuring a div containing four buttons that incorporate text and logos using Bootstrap 5

Looking for help with a web application built using HTML/CSS/Bootstrap 5/JS and Rust/Actix-web? Check out the code here. The index page of the app features a navbar and a div containing four buttons in the center (vertically and horizontally aligned). The ...

htmlcssbuttonbootstrap-5responsive

Is there a way to eliminate the lag time between hovering over this element and the start of the

https://jsfiddle.net/mrvyw1m3/ I am using CSS to clip a background GIF to text and encountering an issue. To ensure the GIF starts from the beginning on hover, I added a random string to the URL which causes a delay in displaying the GIF. During this dela ...

javascriptjqueryhtmlcss

Using $_GET superglobal in WordPress to retrieve data from URL parameters

Let me explain... I've designed a button that, when clicked, opens a link such as https://www.something.com/something/?term=something or [initially, I suspected it was a URL issue... so I experimented with other options] Like:- https://www.somet ...

phphtmlwordpress

Error Panel Style Message Format:

Currently, I am utilizing PrimeFaces, which utilizes JQuery UI not just for its functionality but also for its CSS styling framework. The issue I am facing stems from my lack of understanding about the CSS framework, as I have been unable to locate any exa ...

jquery-uicssprimefaces

Conceal dynamically generated divs based on their individual class identifiers

My task involves dynamically generating div elements with incremented class names. Each div contains a close button in the top right corner, and I need to hide a specific div when the close button is clicked. Example Code: var i=1; var newImageBoxdiv = $ ...

jqueryhtml

Is it possible to direct to a webpage while retrieving a JSON object at the same

My login form code looks like this: <form action="urlLink/auth/signin" method="POST" class="signin form-horizontal" autocomplete="off"> <fieldset> <div class="form-group"> <!-- the email is expected as the user ...

javascriptjqueryhtmlajaxjson

Incorporating PlayN games into an HTML/JS application

I've been considering creating a game using PlayN. While it's great for the game itself, I would rather handle menus, navigation, high-score lists, etc in HTML (possibly with GWT). If I develop a game using PlayN, are there ways to integrate it ...

javahtmlgwtplayn

Is there a way to display Bootstrap 4 progress bars next to each other in two distinct columns within a single container?

I am struggling with controlling the positioning of Bootstrap 4 progress bars. It seems that Bootstrap's progress bars are based on Flexbox components, which is causing confusion for me. I have provided an image showcasing my issue here Within my cur ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4-beta

What are some methods for identifying a single attribute element that is duplicated elsewhere on a webpage?

<html> <tr id="userman-orgchart-tree-node-9" class="fancytree-expanded fancytree-folder fancytree-has-children fancytree-exp-e fancytree-ico-ef"> <td> <span class="fancytree-node" style="padding-left: 16px;"> <span class="fancytr ...

htmlcssxpathselenium-webdriverselenium-ide

How can you extract the contents of a div tag that includes an image tag using regular expressions in JavaScript?

I have a string that was generated with the following content tesgddedd<br> <div><img style="max-width: 10rem;" src="folder/mypicture.jpg"><div> <br></div></div> My goal is to target the div co ...

javascripthtmlvue.jsvuejs2