Merge pull request #46 from rajpanjabi/kawshar

Fix media screen size
rajpanjabi · May 26, 2024 · 11fa2cb · 11fa2cb
2 parents c72b5f0 + 612726e
commit 11fa2cb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/frontEnd/src/pages/TV.css b/frontEnd/src/pages/TV.css
@@ -17,6 +17,7 @@
     padding: 2%;
     flex: 1; 
     min-width: 300px;
+    position: relative;
 }
 
 h2{
@@ -39,14 +40,27 @@ p{
 }
 
 .animation{
-    bottom: 135px;
-    right: 190px;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    max-width: 73%;
+    max-height: 54%;
+    position: absolute;
+    top: 46%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
 }
 
 .desktopImg{
     width: 100%;
 }
 
+video{
+    display: inline-block;
+    vertical-align: baseline;
+}
+
 @media (max-width: 768px) {
     .tvWrapper {
         flex-direction: column; /* Stacks items vertically */

diff --git a/frontEnd/src/pages/TV.js b/frontEnd/src/pages/TV.js
@@ -9,11 +9,9 @@ function TV(){
                 <p>Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more.</p>
             </div>
             <div className = "tvMp4">
-                <div className='imageWrapper'>
                 <img className="desktopImg" src = "https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png"></img>
-                </div>
                 <div className="animation">
-                    <video autoPlay muted loop style={{'width':'85%'}}><source src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-tv-0819.m4v" type="video/mp4"/></video>
+                    <video autoPlay muted loop ><source src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-tv-0819.m4v" type="video/mp4"/></video>
                 </div>
             </div>
         </div>