🖍 [story desktop panel] make aspect ratio match 2021-background for…

… short viewports (#36275) * Makes story-desktop-one-panel aspect ratio match `2021-background` aspect ratio (fixes #35796) * Updates player aspect ratio on short viewport height * Adds comment mentioning the linked change
ampproject · Oct 12, 2021 · 67edb06 · 67edb06
1 parent df11f9e
commit 67edb06
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/css/amp-story-player-shadow.css b/css/amp-story-player-shadow.css
@@ -102,7 +102,8 @@
 
   /* Override if iframe height is less than 538px. */
  .i-amphtml-story-player-panel.i-amphtml-story-player-panel-small  {
-    --i-amphtml-story-player-panel-ratio: 3 / 4;
+    /** If changing this, also change amp-story-desktop-one-panel.css **/
+    --i-amphtml-story-player-panel-ratio: 36 / 53;
   }
 
   .i-amphtml-story-player-panel-prev,

diff --git a/extensions/amp-story/1.0/amp-story-desktop-one-panel.css b/extensions/amp-story/1.0/amp-story-desktop-one-panel.css
@@ -34,7 +34,8 @@ amp-story[standalone] {
 
   @media(max-height: 538px) {
     :root:not([data-story-supports-landscape]) {
-      --i-amphtml-story-desktop-one-panel-ratio: 3 / 4;
+      /** If changing this, also change amp-story-player-shadow.css **/
+      --i-amphtml-story-desktop-one-panel-ratio: 36 / 53;
     }
   }
   amp-story:not([supports-landscape]) amp-story-page {