2 files changed, 12 insertions, 6 deletions

diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index 047990362..ddabdc9e9 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -17,7 +17,7 @@
 </div>
 
 <div id="torrent-info">
-  <div id="torrent-info-download">Download: {{ downloadSpeed | bytes }}/s</div>
-  <div id="torrent-info-upload">Upload: {{ uploadSpeed | bytes }}/s</div>
-  <div id="torrent-info-peers">Number of peers: {{ numPeers }}</div>
+  <div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
+  <div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div>
+  <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
 <div>
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index 474de74d9..96420582a 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -11,10 +11,16 @@ my-loader {
 
 #torrent-info {
   font-size: 10px;
+  margin-top: 10px;
+  text-align: center;
 
   div {
-    display: inline-block;
-    width: 33%;
-    text-align: center;
+    min-width: 60px;
+  }
+}
+
+.embed-responsive {
+  @media screen and (max-width: 600px) {
+    height: 300px;
   }
 }