The alignment of the timeline in HTML CSS becomes distorted once it reaches the fourth element

As a newcomer to HTML, CSS, and JS, I am currently embarking on the task of creating a personal website for a course project. One of the pages on my website showcases a timeline featuring dates and information. While I have referred to a tutorial on W3schools, you can find the code on jsfiddle: http://jsfiddle.net/gua0nkj6/1/

The issue I am facing is that the initial 3 dates display correctly on the timeline, but subsequent dates seem misaligned relative to the timeline structure.

Additionally, here is the HTML and CSS code:

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc3ddc1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35575a5a41464147544575001b051b07">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"&...
/* Omitted for conciseness */

My website currently appears as seen below, with a highlighted border around the last element, showcasing the alignment issue: https://i.sstatic.net/fxHcz.png

Any assistance would be greatly appreciated!

javascripthtmlcssbootstrap-5

Answer №1

Congratulations, your issue has been resolved. We hope you find this solution helpful.

/* Custom CSS for timeline */
* {
   box-sizing: border-box;
 }
 
 body {
   background-color: beige;
   font-family: Georgia, Times, Courier;
 }
 
 /* Special thanks to W3Schools for the
 timeline tutorial: https://www.w3schools.com/howto/howto_css_timeline.asp */
 /* Container around content */
 .timeline {
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
 }
 
 .timeline::after {
   content: '';
   position: absolute;
   width: 6px;
   background-color: #327c9c;
   top: 0px;
   bottom: 0px;
   left: 50%;
 }
 
 .container-timeline {
   padding: 10px 40px;
   position: relative;
   background-color: inherit;
   width: 50%;
 }
 
 /* Circles on the timeline */
 .container-timeline::after {
   content: '';
   position: absolute;
   width: 25px;
   height: 25px;
   right: -15px;
   background-color: white;
   border: 3px solid #327c9c;
   top: 19.2px;
   border-radius: 50%;
   z-index: 1;
 }
 
 .left-side {
   left: 0;
 }
 
 .right-side {
   left: 50%;
 }
 
 
 /* Adding arrows to the left container (pointing right) */
 .left-side::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 22px;
   width: 0;
   z-index: 1;
   right: 30px;
   border: medium solid #327c9c;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent #327c9c;
 }
 
 /* Adding arrows to the right container (pointing left) */
 .right-side::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 22px;
   width: 0;
   z-index: 1;
   left: 30px;
   border: medium solid #327c9c;
   border-width: 10px 10px 10px 0;
   border-color: transparent #327c9c transparent transparent;
 }
 
 /* Fixing the circle for containers on the right side */
 .right-side::after {
   left: -16px;
 }
 
 /* Styling the content area */
 .content-timeline {
   padding: 20px 30px;
   background-color: #327c9c;
   position: relative;
   border-radius: 6px;
 }
 
 /* Media queries for responsive design */
 @media screen and (max-width: 600px) {
 
   /* Moving timeline to the left */
   .timeline::after {
     left: 25px;
   }
 
   /* Full-width containers */
   .container-timeline {
     width: 100%;
     padding-left: 70px;
     padding-right: 25px;
   }
 
   /* Adjusting arrows to point left */
   .container-timeline::before {
     left: 60px;
     border: medium solid white;
     border-width: 10px 10px 10px 0;
     border-color: transparent white transparent transparent;
   }
 
   /* Aligning all circles */
   .left-side::after,
   .right-side::after {
     left: 15px;
   }
 
   /* Making right containers behave like left ones */
   .right-side {
     left: 0%;
   }
 }
 
 /* Formatting timeline boxes */
 .timeline-heading {
   color: white;
   border-bottom: 1px solid white;
   font-family: Courier;
 }
 
 .timeline-text {
   color: white;
   font-family: Georgia;
 }
<!DOCTYPE html>

<html lang="en">

<head>
   <meta charset="UTF-8>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta author="Aminul Islam">

   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="styles.css" rel="stylesheet">
   <title>About me page</title>
</head>

<body class="about-me">
   <div class="timeline">
      <div class="container-timeline left-side">
         <div class="content-timeline">
            <h2 class="timeline-heading">2011</h2>
            <p class="timeline-text">Lorem ipsum.</p>
         </div>
      </div>
      <div class="container-timeline right-side">
         <div class="content-timeline">
            <h2 class="timeline-heading">2012</h2>
            <p class="timeline-text">Lorem ipsum.</p>
         </div>
      </div>
      <div class="container-timeline left-side">
         <div class="content-timeline">
            <h2 class="timeline-heading">2013</h2>
            <p class="timeline-text">Lorem ipsum.</p>
         </div>
      </div>
      <div class="container-timeline right-side">
         <div class="content-timeline">
            <h2 class="timeline-heading">2014</h2>
            <p class="timeline-text">Lorem ipsum.</p>
         </div>
      </div>
   </div>

   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

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

Searching and categorizing information within a table using jQuery

Can someone help me with merging my html and jquery code for type and filter table data, as well as tag data in the same input box? I have the code for both functionalities separately (http://jsfiddle.net/tutorialdrive/YM488/), but I want to combine them. ...

jqueryhtmljquery-uitags

What's the most efficient method to recursively nest an array of objects into a tree structure with the id serving as a reference point?

My goal is to organize the pages in my database in a hierarchical "tree" view. Each page has a unique ID and a parent property that indicates which page it is a child of. I am looking for an efficient way to recursively nest these objects so that each chi ...

javascriptjsonrecursion

Having trouble getting Django to display images using jQuery? Uncaught Reference Error may be preventing it

Currently, I am experimenting with implementing a jquery example on my django-based website. As I am still in the learning phase, I kindly ask for your patience. This is a snippet of what my code looks like at this point: {% extends "base.html" %} {% loa ...

javascriptjquerydjango

Is there a way to configure json-server, when utilized as a module, to introduce delays in its responses

json-server provides a convenient way to introduce delays in responses through the command line: json-server --port 4000 --delay 1000 db.json However, when attempting to achieve the same delayed response using json-server as a module, the following code ...

javascriptjsonnode.jsjson-server

Unable to export to Excel using TableTools feature

Trying to export a DataTable view to Excel using the TableTools plugin, but encountering issues with the "Excel" button not working. Without a step-by-step tutorial for guidance, here's the code used in a test HTML: <!DOCTYPE html> <html ...

javascriptjqueryhtmldatatablestabletools

Issue encountered while using AJAX to load images

Currently, I am utilizing a jQuery plugin to fetch images from Flickr. My aim is to organize these images into 3 columns dynamically as they are loaded, ensuring that each image is placed in the shortest column to achieve close to equal lengths for all col ...

javascriptimagejquery

Steps to configure useState to manage data within an object

Having trouble setting an object with useState in my code. Despite my effort, I am only getting the initial value for the object named setWishlist. Can someone spot what mistake I am making? const CenterModal = props => { const [modalData, setModalDa ...

javascriptreactjsecmascript-6react-hooks

Understanding the operational aspects of Typescript's target and lib settings

When the tsconfig.json file is configured like this: "target": "es5", "lib": [ "es6", "dom", "es2017" ] It appears that es2017 features are not being converted to es5. For example, code like the following will fail in IE11: var foo = [1, 2, 3].includes( ...

javascripttypescriptecmascript-5ecmascript-2017

Leveraging ES6 in Vue.js

I have been considering picking up Vue.js as my next skillset. A friend mentioned that it's important to have a good understanding of ES6 before diving into Vue.js. I've asked around for advice, but I would love to hear more opinions on this matt ...

javascriptvue.jsecmascript-6

What could be the reason for only one of my states being modified when I call my function?

Currently, I have a single state in React.js consisting of two key-value pairs for length validation and character validation: const [validation, setValidationState] = useState({ lengthValidation: "", characterValidation: "", }); These states are e ...

javascriptreactjsreact-hooks

What is the best way to deactivate the first two columns of the header in Vue?

I am attempting to deactivate the draggable function for the first 2 columns. I have tried using options in the draggable plugin. :options="{disabled : 'Subject'}" However, this disables the draggable functionality for all headers. < ...

javascriptvue.jsvuejs2draggable

Creating packaging for a node-webkit application

https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps When I was packaging my node-webkit application for Windows using the instructions provided in the above link, I encountered a challenge. I could not figure out how to p ...

javascriptnode.jspackagingnode-webkit

Exploring various viewport dimensions using Django and Selenium

I am currently experimenting with testing the characteristics of specific UI elements at various viewport sizes and media query breakpoints defined in CSS. Initially, I have a setup function that initializes a headless Chrome browser with what I believe is ...

pythoncssdjangoseleniumtesting

The error message "Uncaught TypeError: Cannot set property 'map' of undefined" occurs when using the callback function to load a texture with Three.js TextureLoader

Currently working with Three.js and aiming to refactor the code. I am looking to create a dedicated class called "Floor" for generating floors: import { Mesh, MeshBasicMaterial, PlaneGeometry, RepeatWrapping, sRG ...

javascriptthree.jscallbacktexturesloader

Data in the array is only updated upon refreshing the webpage

Why is the array empty when I navigate to a new route (/category/name-of-category) that renders my Category component, but it gets data when I refresh the page? What am I missing here? To better explain, I have created a video. Video showcasing the issue: ...

javascriptreactjsreact-router

The computed value in Vue.js does not execute during initialization

Every time my vm is created, the computed values get function fails to run, leaving the value unassigned. Oddly enough, it does run when I attempt to access the value, just not during the initial app startup. Essentially, the goal is to calculate the ski ...

javascriptvue.js

Steps for Verifying the Legitimacy of an AJAX Request

In the process of creating a website where users are required to solve puzzles quickly, I am utilizing JavaScript to track the time taken for each puzzle. However, I am concerned about the possibility of users manipulating this data before it is sent to th ...

javascriptajaxsecuritylanguage-agnosticencryption

SASS: incorporating loops within CSS properties

Is there a way to generate multiple values for a single property in CSS? background-image: radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, tr ...

csssass

What could be causing the need to restart the server every time a style change is made?

I'm currently developing a NextJS application that utilizes PurgeCSS. It's quite frustrating because every time I tweak the classname of a component, I have to restart the server. Here is a snippet from my postcss.config.js: plugins: [ [ ...

cssreactjssassnext.jscss-purge

Guide on how to submit an image along with text using AJAX, PHP, and HTML

Hey there! I'm currently working on a project where I need to upload an image with comments added into a database using a combination of PHP, AJAX, and HTML. Let me show you the HTML part first: <form name="form1" enctype="multipart/form-data" ac ...

javascriptphphtmlajaximage-processing