thaen

Activity

  • CharlesNCharge
    Comment
    July 9
    This was the code I entered: I went through it line by line before finalizing it, and thought it all made sense. Code is from https://www.w3schools.com/howto/howto_css_timeline.asp, which was recommended by the forums here, so I must have entered something wrong - otherwise, you'd have had this problem before.

    /* CAMPAIGN TIMELINE */

    * {box-sizing: border-box;}
    body {background-color: #474e5d; font-family: Helvetica, sans-serif;}
    .timeline {position: relative; max-width: 1200px; margin: 0 auto;}
    .timeline::after {content: ''; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px;}
    .container {padding: 10px 40px; position: relative; background-color: inherit; width: 50%;}
    .container::after {content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid #FF9F55; top: 15px; border-radius: 50%; z-index: 1;}
    .left {left: 0;}
    .right {left: 50%;}
    .left::before {content: " "; height: 0; p
    • thaen
      thaen
      I think the issue is the ".letft" and ".right" global lines.  OP already uses ".left" and ".right" classes in the layout, so these are going to cause issues if they aren't scoped.  I'd suggest something like this (I added ".timeline " in front of the ".left" and ".right" lines.  And also deleted the "*" and "body" lines as those will also affect your entire Campaign):

      /* CAMPAIGN TIMELINE */

      .timeline {position: relative; max-width: 1200px; margin: 0 auto;}

      .timeline::after {content: ''; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px;}

      .timeline .container {padding: 10px 40px; position: relative; background-color: inherit; width: 50%;}

      .timeline .container::after {content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid #FF9F55; top: 15px; border-radius: 50%; z-index: 1;}

      .timeline .left {left: 0;}

      .timeline .right {left: 50%;}

      .timeline .left::before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white;}

      .timeline .right::before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}

      .timeline .right::after {left: -16px;}

      .timeline .content {padding: 20px 30px; background-color: white; position: relative; border-radius: 6px;}

      @media screen and (max-width: 600px) { .timeline::after {left: 31px;}

      .timeline  .container {width: 100%; padding-left: 70px; padding-right: 25px;}

      .timeline  .container::before {left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}

      .timeline  .left::after, .right::after {left: 15px;}

      .timeline  .right {left: 0%; }}
    • Write a comment

July's Campaign of the Month is The Coldfall Sanction!

Read the feature post on the blog!
Or return to Obsidian Portal!
Joined
Visits
1,265
Last Active
Roles
Member, Administrator
Posts
580

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!