diff --git a/client/src/sass/custom-markup.scss b/client/src/sass/custom-markup.scss
index f4b72a066..672b38300 100644
--- a/client/src/sass/custom-markup.scss
+++ b/client/src/sass/custom-markup.scss
@@ -3,6 +3,7 @@ peertube-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    gap: 2rem;
   }
 
   > .layout-column {
@@ -10,7 +11,7 @@ peertube-container {
     flex-direction: column;
   }
 
-  > .header {
+   .header {
     margin: 30px 0 15px;
 
     > h4 {
@@ -19,8 +20,11 @@ peertube-container {
   }
 }
 
-peertube-video-miniature,
-peertube-playlist-miniature,
-peertube-channel-miniature {
-  margin-inline-end: 30px;
+// Workaround to detect iOS that doesn't support gap in flexbox
+@supports not (inset: 0) {
+  peertube-video-miniature,
+  peertube-playlist-miniature,
+  peertube-channel-miniature {
+    margin-inline-end: 2rem;
+  }
 }