style fixes for mobile

ungleich_page/static/ungleich_page/css/agency.css

@@ -336,6 +336,12 @@ section {
     padding: 75px 0;
 }
 
+@media(max-width:767px) {
+    section {
+        padding: 50px 0;
+    }
+}
+
 section h2.section-heading {
 	margin-top: 0;
 	margin-bottom: 15px;
@@ -425,7 +431,7 @@ section h3.section-subheading {
 }
 
 #portfolio .portfolio-item .portfolio-caption h4 {
-	margin: 0;
+	margin: 0 0 20px;
 	text-transform: none;
 	color: #494949;
 }
@@ -669,8 +675,8 @@ section h3.section-subheading {
 }
 
 .team-member h4 {
-    margin-top: 25px;
+    margin-top: 20px;
-    margin-bottom: 0;
+    margin-bottom: 20px;
     text-transform: none;
 }
 
@@ -691,7 +697,7 @@ section#contact {
 
 section#contact .section-heading {
 	color: #fff;
-	font-size: 36px;
+	font-size: 32px;
 }
 
 section#contact .form-group {
@@ -929,8 +935,6 @@ logo-image {
 }
 
 .carousel-indicators li.active, .text-carousel .carousel-indicators li.active {
-  width: 15px;
-  height: 15px;
   border: 0;
   background-color: #fed136;
 }

ungleich_page/static/ungleich_page/css/ungleich.css

@@ -20,7 +20,7 @@
 
 .intro-cap {
     margin-top: 25px;
-    margin-bottom: 25px;
+    margin-bottom: 15px;
     font-family: 'Raleway', 'Helvetica Neue', 'Open Sans Bold', Helvetica, Arial, 'Arial Bold', sans-serif;
     font-size: 24px;
     font-style: normal;
@@ -88,7 +88,6 @@
 #portfolio .portfolio-item .portfolio-caption {
     height: 250px;
     overflow: hidden;
-    paddding: 10px;
 }
 
 .img-client {
@@ -117,10 +116,22 @@
   #portfolio .portfolio-item .portfolio-caption {
     height: auto;
     overflow: hidden;
-    paddding: 10px;
   }
 }
 
+@media (max-width: 767px) {
+    .portfolio-item .portfolio-caption p,
+    section h2.section-heading,
+    section h3.section-subheading,
+    #portfolio .portfolio-item .portfolio-caption h4 {
+        text-align: left;
+    }
+    section h2.section-heading,
+    section h3.section-subheading {
+        padding-left: 15px;
+    }
+}
+
 .header_slider {
     height: 95vh;
 }
@@ -151,7 +162,7 @@
 
 .header_slider > .carousel .item .container {
     overflow: auto;
-    padding: 50px 25px 75px;
+    padding: 50px 25px 65px;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -170,8 +181,8 @@
 }
 
 .header_slider .intro-cap {
-    font-weight: bold;
     text-align: right;
+    line-height: 1.1;
 }
 
 @media (min-width: 768px) {
@@ -189,7 +200,7 @@
     }
     .header_slider > .carousel .item .container {
         overflow: auto;
-        padding: 100px 50px;
+        padding: 75px 50px;
     }
 }
 
@@ -201,7 +212,7 @@
 
 .header_slider .intro_lead {
     color: #fff;
-    font-size: 1.75em;
+    font-size: 1.55em;
     text-align: right;
     line-height: 1.4;
 }
@@ -210,12 +221,21 @@
     .header_slider .intro_lead {
         font-size: 1.2em;
     }
+
+    .header_slider .carousel-indicators li {
+        margin: 1px 7px;
+    }
+    .header_slider .carousel-indicators li.active {
+        margin: 0 7px;
+    }
 }
 
 .timeline>li .timeline-panel {
     display: flex;
+    flex-direction: column;
     min-height: 80px;
-    align-items: center;
+    align-items: stretch;
+    justify-content: center;
     padding-bottom: 15px;
 }
 
@@ -239,6 +259,12 @@
 }
 
 @media (min-width: 992px) {
+    .timeline>li .timeline-panel {
+        min-height: 150px;
+    }
+}
+
+@media (min-width: 1200px) {
     .timeline>li .timeline-panel {
         min-height: 170px;
     }

ungleich_page/templates/ungleich_page/includes/_contact_us.html

@@ -13,14 +13,12 @@
                     </div>
                 {% endfor %}
                 <h2 class="section-heading">{% trans "Contact Us" %}</h2>
-                <br>
+                <h3 class="intro-smallcap" style="line-height: 1.2;">
-
-                <h3 class="intro-smallcap">
                     {% trans "Join us at" %} <a href="{% url 'digitalglarus:landing' %}">{% trans "Digital Glarus" %}</a>, {% trans "a great co-working space in the middle of Alps!" %} <br>
                     {% trans "You can contact us at" %}
                 </h3>
                 <h3 class="intro-smallcap">
-                    <a href="mailto:info@ungleich.ch"><i class="fa fa-envelope"></i> info@ungleich.ch</a>
+                    <a href="mailto:info@ungleich.ch"><i class="fa fa-envelope"></i> <strong>info@ungleich.ch</strong></a>
                 </h3>
 
                 <h3 class="intro-smallcap"><i class="fa fa-phone"></i> (044) 534-66-22</h3>

ungleich_page/templates/ungleich_page/includes/_portfolio.html

@@ -12,7 +12,6 @@
 		    <a href="{% url 'datacenterlight:index' %}"><img src="{% static 'ungleich_page/img/portfolio/datacenterlight.png' %}" class="img-responsive inline-block" alt=""></a>
 		    <div class="portfolio-caption inline-block">
 		      <h4>{% trans "Data Center Light" %}</h4>
-		      <p>&nbsp;</p>
 		      <p class="text-muted">{% trans "We offer the most affordable hosting in Switzerland. Data Center Light has full FOSS stack, 100% IPv6 and 100% SSD. Choose any configuration among CentOS, Debian, Ubuntu, Devuan, and FreeBSD." %} </p>
 		    </div>
 		  </div>
@@ -20,7 +19,6 @@
 		    <a href="{% url 'rails.hosting' %}"><img src="{% static 'ungleich_page/img/portfolio/startup-framework.png' %}" class="img-responsive inline-block" alt=""></a>
 		    <div class="portfolio-caption inline-block">
 		      <h4>{% trans "Rails Hosting" %} </h4>
-		      <p>&nbsp;</p>
 		      <p class="text-muted">{% trans "Ready to go live with your Ruby on Rails application? We offer you ready-to-deploy virtual machines or configure your existing infrastructure for Ruby on Rails." %}</p>
 		    </div>
 		  </div>
@@ -28,7 +26,6 @@
 		    <a href="{% url 'datacenterlight:glasfaser' %}"><img src="{% static 'ungleich_page/img/portfolio/glasfaser.png' %}" class="img-responsive inline-block" alt=""></a>
 		    <div class="portfolio-caption inline-block">
 		      <h4>{% trans "High Speed Internet" %}</h4>
-		      <p>&nbsp;</p>
 		      <p class="text-muted">{% trans "We offer high speed fiber internet in Glarus Süd, Glarus and Glarus Nord. Experience 100 Mbit/s and see how speed can change everything." %}</p>
 		    </div>
 		  </div>

ungleich_page/templates/ungleich_page/includes/_services.html

@@ -16,8 +16,7 @@
 		      <img src="{% static 'ungleich_page/img/team/5.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/hosting.png' %}" class="img-responsive img-circle img-toggle" alt="">
 		      <div class="team-member-caption inline-block">
 						<h4 class="portfolio-caption">{% trans "Hosting" %}</h4>
-						<p>&nbsp;</p>
+						<p class="text-muted">{% trans "Ruby on Rails. Java hosting, Django hosting, we make it everything run smooth and safe." %}</p>
-						<p><span class="text-muted">{% trans "Ruby on Rails. Java hosting, Django hosting, we make it everything run smooth and safe." %}</span></p>
 		      </div>
 		    </div>
 		  </div>
@@ -26,8 +25,7 @@
 		      <img src="{% static 'ungleich_page/img/team/4.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/configuration.png' %}" class="img-responsive img-circle img-toggle" alt="">
 		      <div class="team-member-caption inline-block">
 						<h4 class="portfolio-caption">{% trans "Configuration as a Service" %}</h4>
-						<p>&nbsp;</p>
+						<p class="text-muted">{% trans "Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you." %}</p>
-						<p><span class="text-muted">{% trans "Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you." %}</span></p>
 		      </div>
 		    </div>
 		  </div>
@@ -36,7 +34,6 @@
 		      <img src="{% static 'ungleich_page/img/team/6.jpg' %}"  data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt="">
 		      <div class="team-member-caption inline-block">
 			      <h4 class="portfolio-caption">{% trans "Linux System Engineering" %}</h4>
-			      <p>&nbsp;</p>
 						<p class="text-muted">{% trans "Let your developers develop! We take care of your system administration. Gentoo, Archlinux, Debian, Ubuntu, and many more." %}</p>
 		      </div>
 		    </div>