Roman Numeral Converter: Fix media query to not turn everything into …

…a row
fullStackRacc · Mar 23, 2024 · 226dd12 · 226dd12
1 parent f265be1
commit 226dd12
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 11 deletions.
diff --git a/Roman_Numeral_Converter/index.html b/Roman_Numeral_Converter/index.html
@@ -19,7 +19,7 @@ <h1>Convert Number to Roman Numerals</h1>
         class="number"
       />
       <button class="convert-btn" id="convert-btn">Convert</button>
-    <div id="output"></div>
+      <div id="output"></div>
     </div>
     <script src="script.js"></script>
   </body>

diff --git a/Roman_Numeral_Converter/styles.css b/Roman_Numeral_Converter/styles.css
@@ -39,17 +39,20 @@ h1 {
 }
 
 .convert-btn {
+  display: flex;
   background-color: var(--orange);
   cursor: pointer;
   border: none;
   padding: 4px;
 }
 
 .number {
+  display: flex;
   height: 25px;
 }
 
 #output {
+  display: flex;
   margin: 10px 0;
   min-width: 200px;
   width: fit-content;
@@ -60,13 +63,3 @@ h1 {
   font-size: 2rem;
   text-align: center;
 }
-
-@media screen and (min-width: 500px) {
-  .input-container {
-    flex-direction: row;
-  }
-
-  #result {
-    max-width: 460px;
-  }
-}