Merge pull request #51 from cse110-sp24-group25/task1_mid

Fix size bug

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;
     }