Activity

• 
  Comment

  CharlesNCharge → thaen

  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

    July 9

    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