From 501dc08b0ef86dffcd4b181df768532a8a544395 Mon Sep 17 00:00:00 2001
From: "M.Ravi" <mondi.ravi@gmail.com>
Date: Fri, 17 Nov 2017 16:30:44 +0100
Subject: [PATCH] Align text to flex-start or flex-end for timeline

---
 .../static/ungleich_page/css/ungleich.css     | 36 ++++++++++++++++++-
 .../ungleich_page/glasfaser/_about_item.html  |  2 +-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index fc8a460e..fe34ee6b 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -125,4 +125,38 @@
 
 .header_slider > .carousel .item {
     padding-top: 150px;
-}
\ No newline at end of file
+}
+
+
+.timeline>li .timeline-panel {
+    display: flex;
+    min-height: 80px;
+    align-items: center;
+    padding-bottom: 15px;
+}
+
+.flex-justify-content-end{
+    justify-content: flex-end;
+}
+
+.flex-justify-content-start{
+    justify-content: flex-start;
+}
+
+.timeline>li.timeline-inverted>.timeline-panel {
+    padding-bottom: 0;
+}
+
+
+@media (min-width: 768px) and (max-width: 991px) {
+    .timeline>li .timeline-panel {
+        min-height: 100px;
+    }
+}
+
+@media (min-width: 992px) {
+    .timeline>li .timeline-panel {
+        min-height: 170px;
+    }
+}
+
diff --git a/ungleich_page/templates/ungleich_page/glasfaser/_about_item.html b/ungleich_page/templates/ungleich_page/glasfaser/_about_item.html
index 0ccdff9a..6b619579 100644
--- a/ungleich_page/templates/ungleich_page/glasfaser/_about_item.html
+++ b/ungleich_page/templates/ungleich_page/glasfaser/_about_item.html
@@ -4,7 +4,7 @@
       <img class="img-circle img-responsive" src="{{ instance.image.url }}" alt="">
     </div>
     {% if instance.link_url %}</a>{% endif %}
-    <div class="timeline-panel wow {% if instance.inverted %}slideInRight{% else %}slideInLeft{% endif %}">
+    <div class="timeline-panel wow {% if instance.inverted %}slideInRight flex-justify-content-start {% else %}slideInLeft flex-justify-content-end{% endif %}">
       <div class="timeline-body">
         <p>{{ instance.title }}</p>
       </div>