From ae9d686d26f71e502eaa5bde2174dcbc92e41579 Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Wed, 25 Oct 2017 17:47:30 -0700
Subject: [PATCH] features: Make more responsive.

This fixes some responsiveness issues with the features page where the
text for headers would go off the screen on mobile and narrower devices.
---
 static/styles/landing-page.css | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/static/styles/landing-page.css b/static/styles/landing-page.css
index c6e2c06ca6..5a3e59e771 100644
--- a/static/styles/landing-page.css
+++ b/static/styles/landing-page.css
@@ -421,7 +421,7 @@ nav ul li.active::after {
 }
 
 .portico-landing.features-app section.hero .copy {
-    width: 800px;
+    max-width: 800px;
     margin: 0 auto;
 
     text-align: center;
@@ -436,7 +436,7 @@ nav ul li.active::after {
     font-size: 1.8em;
     margin: 30px auto 0 auto;
 
-    width: 600px;
+    max-width: 600px;
     line-height: 1.3;
 }
 
@@ -514,7 +514,7 @@ nav ul li.active::after {
 }
 
 .portico-landing.features-app section.messages .features {
-    width: 500px;
+    max-width: 500px;
 }
 
 .portico-landing.features-app section.messages .features h2 {
@@ -2920,6 +2920,14 @@ nav ul li.active::after {
         width: calc(100% - 100px);
     }
 
+    .portico-landing.features-app section.hero {
+        padding: 50px;
+    }
+
+    .portico-landing.features-app section.hero h1 {
+        font-size: 3em;
+    }
+
     .portico-landing.integrations .main,
     .main {
         width: auto;
@@ -3227,6 +3235,22 @@ nav ul li.active::after {
 }
 
 @media (max-width: 550px) {
+    .portico-landing.features-app section.hero {
+        padding: 50px 20px 20px;
+    }
+
+    .portico-landing.features-app section.messages {
+        padding: 0px 20px;
+    }
+
+    .portico-landing.features-app section.messages h2 {
+        font-size: 2em;
+    }
+
+    .portico-landing.features-app section.messages .features .feature-block {
+        margin: 20px 0px;
+    }
+
     .portico-landing.integrations .searchbar-reset {
         width: 100%;
     }