Merge pull request #18 from sender-fm/17-change-player-and-plan-width

chore: 🍰 Change Player And Plan Width
sender-fm · Dec 6, 2021 · 639ff4f · 639ff4f
2 parents c819661 + bdd23a9
commit 639ff4f
Show file tree

Hide file tree

Showing 5 changed files with 350 additions and 16 deletions.
diff --git a/branding/locales/html/de/organization.html b/branding/locales/html/de/organization.html
@@ -52,19 +52,22 @@ <h3>
   .player {
     margin-top: 0px;
     margin-bottom: 12px;
-    width: 510px;
+    /* width: 510px; */
+    width: 100%;
     height: 396px;
   }
 
   .weekly-plan {
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
-    width: 510px;
+    /* width: 510px; */
+    width: 100%;
     height: 802px;
   }
 
-  @media (max-width: 686px) {
+  /* size 576px <= sm < 768px see https://bootstrap-vue.org/docs/components/layout */
+  @media (max-width: 768px) {
     .info-page h1 {
       font-size: 36px;
     }
@@ -74,17 +77,18 @@ <h3>
     }
 
     .player {
-      width: 280px;
+      /* width: 280px; */
       height: 410px;
     }
 
     .weekly-plan {
-      width: 280px;
+      /* width: 280px; */
       height: 802px;
     }
   }
 
-  @media (max-width: 452px) {
+  /* size xs < 576px see https://bootstrap-vue.org/docs/components/layout */
+  @media (max-width: 576px) {
     .ds-container {
       padding: 0;
     }
@@ -98,12 +102,12 @@ <h3>
     }
 
     .player {
-      width: 200px;
+      /* width: 200px; */
       height: 398px;
     }
 
     .weekly-plan {
-      width: 200px;
+      /* width: 200px; */
       height: 802px;
     }
   }

diff --git a/branding/locales/html/en/organization.html b/branding/locales/html/en/organization.html
@@ -52,19 +52,22 @@ <h3>
   .player {
     margin-top: 0px;
     margin-bottom: 12px;
-    width: 510px;
+    /* width: 510px; */
+    width: 100%;
     height: 396px;
   }
 
   .weekly-plan {
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
-    width: 510px;
+    /* width: 510px; */
+    width: 100%;
     height: 802px;
   }
 
-  @media (max-width: 686px) {
+  /* size 576px <= sm < 768px see https://bootstrap-vue.org/docs/components/layout */
+  @media (max-width: 768px) {
     .info-page h1 {
       font-size: 36px;
     }
@@ -74,17 +77,18 @@ <h3>
     }
 
     .player {
-      width: 280px;
+      /* width: 280px; */
       height: 410px;
     }
 
     .weekly-plan {
-      width: 280px;
+      /* width: 280px; */
       height: 802px;
     }
   }
 
-  @media (max-width: 452px) {
+  /* size xs < 576px see https://bootstrap-vue.org/docs/components/layout */
+  @media (max-width: 576px) {
     .ds-container {
       padding: 0;
     }
@@ -98,12 +102,12 @@ <h3>
     }
 
     .player {
-      width: 200px;
+      /* width: 200px; */
       height: 398px;
     }
 
     .weekly-plan {
-      width: 200px;
+      /* width: 200px; */
       height: 802px;
     }
   }