Responsive

src/components/Arrow.js

@@ -4,11 +4,12 @@ import './Arrow.css'
 // left?: boolean
 export function Arrow(props) {
     return (
-        <div className="arrow">
-            <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={`feather ${props.left?'left':''}`}>
+        <span className="arrow" dangerouslySetInnerHTML={{ __html: `
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather ${props.left?'left':''}"}>
                 <line x1="5" y1="12" x2="19" y2="12"></line>
                 <polyline points="12 5 19 12 12 19"></polyline>
             </svg>
-        </div>
+        `}}>
+        </span>
     )
 }

src/components/Card.css

@@ -1,28 +1,26 @@
 .card {
     background-color: #22232A;
     padding: 3rem 4rem;
-    width: 39rem;
-    max-width: 100%;
     margin: 0 3rem;
     border-radius: 10px;
     box-sizing: border-box;
-    transition: height 500ms ease-in-out, transform 800ms ease-in-out, opacity 800ms ease-in-out;
+    transition: height 500ms ease-in-out;
 }
 
-.card.full {
-    width: 75rem;
+.card-wrapper.full {
+    width: 81rem;
 }
 
 .card-wrapper {
   transition: height 500ms ease-in-out;
   overflow: hidden;
+  width: 45rem;
+  max-width: 100%;
 }
 
-.card.doTransition {
-    opacity: 0;
-    transform: translateY(-.7rem);
+@media screen and (max-width: 700px) {
+    .card {
+        margin: 0;
+        padding: 3rem 2rem;
     }
-.card.doTransition.show {
-    opacity: 1;
-    transform: translateY(0rem);
 }

src/components/Card.js

@@ -17,10 +17,10 @@ export function Card(props) {
     }, [props.show, measureRef])
 
     return (
-        <div className="card-wrapper" style={{
+        <div className={`card-wrapper ${ props.fullWidth ? 'full' : '' }`} style={{
             height: props.doTransition ? (showing ? height : 0) : "initial",
         }}>
-            <div className={`card ${ props.fullWidth ? 'full' : '' } ${ showing ? 'show' : '' } ${ props.doTransition ? 'doTransition' : '' }`} ref={measureRef}>
+            <div className={`card ${ showing ? 'show' : '' } ${ props.doTransition ? 'doTransition' : '' }`} ref={measureRef}>
                 {props.children}
             </div>
         </div>

src/components/InputBox.css

@@ -25,6 +25,7 @@
     padding: .7rem 1.5rem;
     height: auto;
     flex: 1;
+    box-sizing: border-box;
 }
 
 .inputSearchButton {
@@ -70,3 +71,23 @@
 .inputSearchButton:active {
     background-color: #8b286a;
 }
+
+@media screen and (max-width: 700px) {
+    .inputBar {
+        flex-direction: column;
+        align-items: flex-start;
+        height: auto;
+    }
+
+    .inputBar > *:nth-child(n) {
+        border-radius: 10px !important;
+    }
+
+    .inputSearchButton {
+        margin-top: .5rem;
+    }
+
+    .inputTextBox {
+        width: 100%;
+    }
+}

src/components/MovieRow.css

@@ -43,3 +43,13 @@
 .movieRow:hover .watch .arrow {
     transform: translateX(.3rem) translateY(.1rem);
 }
+
+@media screen and (max-width: 400px) {
+    .movieRow {
+        flex-direction: column;
+    }
+
+    .movieRow .watch {
+        margin-top: .5rem;
+    }
+}