fixed design of watch page

public/css/watch.css

@@ -31,23 +31,50 @@
 }
 
 .user {
+    position: absolute;
 }
 
 .user img {
-    height: 3vw;
+    position: absolute;
-    margin-right: 1vw;
+    left: 1.5vw;
-}
-
-.user span {
-    font-size: 1vw;
 }
 
 h2 {
-    position: absolute;
+    margin-top: 2vw;
-    top: 1vw;
-    left: 10vw;
 }
 
-.description {
+.indented {
     margin-left: 4vw;
+}
+
+@media only screen and (max-width: 1500px) {
+    .user img {
+        left: auto;
+    }
+}
+
+@media only screen and (max-width: 1050px) {
+    h2 {
+        margin-top: 3vw;
+    }
+}
+
+@media only screen and (max-width: 780px) {
+    h2 {
+        margin-top: 4vw;
+    }
+}
+
+@media only screen and (max-width: 760px) {
+    h2 {
+        margin-top: 5vh;
+    }
+
+    .indented {
+        margin-left: 0;
+    }
+
+    .user span {
+        margin-left: 40px;
+    }
 }

templates/watch/watch.html.twig

@@ -73,13 +73,13 @@
                             class="rounded-circle avatar"
                             alt=""
                     />
-                    <span>{{ video.uploader.name }}</span>
+                    <span class="fs-6 indented">{{ video.uploader.name }}</span>
                 </div>
-                <h2>{{ video.name }}</h2>
+                <h2 class="indented">{{ video.name }}</h2>
                 <div class="views">
                     {{ video.views }} {{ video.views == 1 ? "View" : "Views" }}
                 </div>
-                <div class="description">
+                <div class="description indented">
                     {{ video.description }}
                 </div>
             </div>