fix close button extending across container

kyblockstacking · Jun 7, 2019 · ac2c075 · ac2c075
1 parent 351fe94
commit ac2c075
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/Stylesheets/styles.css b/Stylesheets/styles.css
@@ -186,8 +186,14 @@ body {
   display: flex;
   justify-content: flex-end;
   margin: 20px;
+  width: 0;
   font-size: 1.5em;
 }
+/* added this wrapper so button doesnt extend across container */
+.close-button-container {
+  display: flex;
+  justify-content: flex-end;
+}
 
 .close-result-button:hover {
   cursor: pointer;

diff --git a/index.html b/index.html
@@ -39,7 +39,9 @@ <h4 class='example-converted-text'>hElLo wOrLd!</h4>
         <button class='convert-button' onclick='convertToSpongeBobCase(); show_result_box()'>CONVERT</button>
         <!-- pop up box to display results -->
         <div class='result-box close'>
-            <i class='far fa-times-circle close-result-button' onclick='close_result_box()'></i>
+            <div class='close-button-container'>
+                <i class='far fa-times-circle close-result-button' onclick='close_result_box()'></i>
+            </div>
             <h2 class='your-result-text'>sPoNgEbOb cAse</h2>
             <h4 class='by-kevin-yang-text'>by Kevin Yang</h4>
             <textarea class='result' data-category='result' readonly='yes'></textarea>