From 385c706349a8163299631420b6d353a4d3b2d85a Mon Sep 17 00:00:00 2001
From: Avi Wadhwa <aviwad@gmail.com>
Date: Oct 25 2018 12:05:48 +0000
Subject: add custom CSS for responsive 'send' buttons, and add respective btn-responsive class to the start.html send buttons


---

diff --git a/assets/css/custom.css b/assets/css/custom.css
index d2ef280..b0cad57 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -200,3 +200,9 @@ blockquote {
 .google:hover{
     background-color: #b72213;
 }
+
+@media (max-width: 360px) {
+    .btn-responsive {
+        font-size: 15px;
+    }
+}
diff --git a/templates/messaging/start.html b/templates/messaging/start.html
index e083c1f..f0562c5 100644
--- a/templates/messaging/start.html
+++ b/templates/messaging/start.html
@@ -20,7 +20,7 @@
     </p>
 
     <p class="text-center">
-        <a class="btn btn-primary btn-lg" href="{% url 'messaging:send' %}" role="button">Send some happiness now! <img class="emoji" src="static/images/emoji/loveletter.png" alt="💌" title="Love letter" aria-label="Emoji: Love letter"></a>
+        <a class="btn btn-primary btn-lg btn-responsive" href="{% url 'messaging:send' %}" role="button">Send some happiness now! <img class="emoji" src="static/images/emoji/loveletter.png" alt="💌" title="Love letter" aria-label="Emoji: Love letter"></a>
     </p>
 
     <h2>How does it work?</h2>
@@ -48,7 +48,7 @@
     {% include 'messaging/_message_list.html' %}
 
     <p class="text-center">
-        <a class="btn btn-primary btn-lg" href="{% url 'messaging:send' %}" role="button">Send some happiness now! <img class="emoji" src="static/images/emoji/loveletter.png" alt="💌" title="Love letter" aria-label="Emoji: Love letter"></a>
+        <a class="btn btn-primary btn-lg btn-responsive" href="{% url 'messaging:send' %}" role="button">Send some happiness now! <img class="emoji" src="static/images/emoji/loveletter.png" alt="💌" title="Love letter" aria-label="Emoji: Love letter"></a>
     </p>
 
 {% endblock content %}