Timeline: Responisve version. Change green color with purple. Aligned title to bullet.

app/assets/stylesheets/participation.scss

@@ -495,53 +495,88 @@
 }
 
 #tab-milestones{
-  .timeline ul li {
+  .timeline ul{
-    list-style-type: none;
     position: relative;
-    width: 1px;
+    margin-top:rem-calc(40);
-    margin: 0 auto;
+    li {
-    padding-top: 50px;
-    background: #dfe2e5;
-    &:before{
-      content: '';
-      position: absolute;
-      left: 50%;
-      top:0;
-      transform: translateX(-50%);
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      background: inherit;
-      background: #179c87;
-    }
-    &:nth-child(odd) div {
-      text-align: right;
-      left: -515px;
-      top:-20px;
-      &:before {
-        left: -15px;
-      }
-    }
-    &:nth-child(even) div {
-      left: 15px;
-      top:-20px;
-      &:before {
-        right: -15px;
-      }
-    }
-    div {
       position: relative;
-
+      width:0;
-      padding: 10px;
+      margin: 0 auto;
-      width: 30vw;
+      &:before{
-      width: 500px;
+        content: '';
-      h3{
+        position: absolute;
-        font-size: 1.2rem;
+        top:rem-calc(5);
-        margin-bottom:0;
+        transform: translateX(-50%);
+        width: rem-calc(20);
+        height: rem-calc(20);
+        border-radius: 50%;
+        background: $budget;
+        z-index: 2;
       }
-      strong{
+      &:after{
-        color:#c9c9c9;
+        content: '';
-        font-size: 0.9rem;
+        width: 1px;
+        background: $light-gray;
+        bottom: 100%;
+        height: 100%;
+        position: absolute;
+        top: rem-calc(25);
+        z-index: 1;
+      }
+      div {
+        position: relative;
+        padding: rem-calc(3) rem-calc(10);
+        h3{
+          font-size: 1.2rem;
+          margin-bottom:0;
+        }
+        strong{
+          color:$text-light;
+          font-size: 0.9rem;
+        }
+      }
+
+      &:nth-child(odd),
+      &:nth-child(even){
+        div{
+          @include breakpoint(medium) {
+            width: rem-calc(300)
+          }
+          @include breakpoint(large) {
+            width: rem-calc(450)
+          }
+        }
+      }
+
+      &:nth-child(odd){
+        div{
+          text-align: right;
+          @include breakpoint(medium) {
+            margin-left:rem-calc(-315);
+          }
+          @include breakpoint(large) {
+            margin-left:rem-calc(-465);
+          }
+        }
+      }
+
+      &:nth-child(even) div {
+        left: rem-calc(15);
+      }
+    }
+  }
+
+  @include breakpoint(small only) {
+    .timeline ul{
+      li{
+        width: 100%;
+        &:nth-child(odd),
+        &:nth-child(even){
+          div{
+            text-align: left;
+            left:rem-calc(15);
+          }
+        }
       }
     }
   }

app/views/budgets/investments/_milestones.html.erb

@@ -7,7 +7,7 @@
         </div>
       <% end %>
       <section class="timeline">
-        <ul>
+        <ul class="no-bullet">
           <% @investment.milestones.each do |milestone| %>
             <li>
               <div>