diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 91091a5bb..3f9c73a29 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -18,31 +18,6 @@ my-video-feed {
@media screen and (max-width: 500px) {
.videos {
- text-align: center;
-
- /deep/ .video-miniature {
- padding-right: 0;
- height: auto;
- width: 100%;
- margin-bottom: 20px;
-
- .video-miniature-information {
- width: 100% !important;
-
- span {
- width: 100%;
- }
- }
-
- .video-thumbnail {
- width: 100%;
- height: auto;
-
- img {
- width: 100%;
- height: auto;
- }
- }
- }
+ @include video-miniature-small-screen;
}
}
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index be9db3d90..4150cd5e1 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -7,9 +7,7 @@
{{ object.category.label }}
-
-
-
+
-
-
-
+
@@ -31,9 +27,7 @@
-
-
-
+
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index 73b6d2e53..e7dc60b4b 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -7,6 +7,10 @@
&:first-child {
padding-top: 30px;
}
+
+ my-video-miniature {
+ text-align: left;
+ }
}
.section-title {
@@ -33,4 +37,10 @@
margin-right: 10px;
}
}
+}
+
+@media screen and (max-width: 500px) {
+ .section {
+ @include video-miniature-small-screen;
+ }
}
\ No newline at end of file
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 547f03caa..765297c87 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -471,4 +471,33 @@
text-align: center;
align-items: center;
}
+}
+
+@mixin video-miniature-small-screen {
+ text-align: center;
+
+ /deep/ .video-miniature {
+ padding-right: 0;
+ height: auto;
+ width: 100%;
+ margin-bottom: 20px;
+
+ .video-miniature-information {
+ width: 100% !important;
+
+ span {
+ width: 100%;
+ }
+ }
+
+ .video-thumbnail {
+ width: 100%;
+ height: auto;
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+ }
+ }
}
\ No newline at end of file