From 087f3b1c79770e0f00185d0fce8dcadf31c51af5 Mon Sep 17 00:00:00 2001
From: kainoaw <kwoessner@ucsd.edu>
Date: Fri, 26 Apr 2024 14:16:17 -0700
Subject: [PATCH] Fix size bug

---
 sentiment_rating_widget/styles.css | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/sentiment_rating_widget/styles.css b/sentiment_rating_widget/styles.css
index 05d09ee..57017f2 100644
--- a/sentiment_rating_widget/styles.css
+++ b/sentiment_rating_widget/styles.css
@@ -62,9 +62,22 @@ button:hover {
     margin: auto;
 }
 
+/* Submit message */
+.message {
+    /* Design the message */
+    text-align: center;
+    font-size: 24px;
+    margin-top: 20px;
+    font-family: Poppins, sans-serif;
+    color: #333333;
+    padding: 10px;
+    border-radius: 5px;
+    display: inline-block;
+}
+
 /* Rotate message */
 #rotate-message {
-    /* Desgin rotate error message */
+    /* Design rotate message box */
     position: fixed;
     top: 50%;
     left: 50%;
@@ -78,29 +91,29 @@ button:hover {
     display: none;
 }
 
-/* Changes when using small phone screen */
+/* Change when using small phone screen */
 @media screen and (max-width: 550px) {
-    /* Shrink title */
+    /* Shrink header */
     h1 {
         font-size: 25px;
     }
-    /* Emoji image size */
+    /* Keep buttons same relative size */
     #buttons img {
         width: 100%;
     }
-    /* Shrink button size */
+    /* Shrink buttons */
     #buttons button{
         width: 40%;
     }
 }
 
-/* User message when user turns phone landscape */
+/* Change when using small phone screen in landscape postion */
 @media screen and (orientation: landscape) and (max-height: 550px) {
-    /* Rotate message appear */
+    /* Show rotate message */
     #rotate-message {
         display: block;
     }
-    /* Headers and buttons disappear */
+    /* Hide buttons */
     #buttons,h1,h3 {
         display:none;
     }