From 8e820d978d1dd80fa8b4d0353d59698570f9cc49 Mon Sep 17 00:00:00 2001 From: Swayam Raut Date: Thu, 6 Nov 2025 18:46:16 +0530 Subject: [PATCH] fix(amp-story-auto-ads): Use rem units for scalable UI on high-res screens --- .../0.1/amp-story-auto-ads-attribution.css | 2 +- .../0.1/amp-story-auto-ads-cta-button.css | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-attribution.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-attribution.css index 71e8ff4142c7..21e0fa4467f7 100644 --- a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-attribution.css +++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-attribution.css @@ -4,7 +4,7 @@ position: absolute; bottom: 0 !important; left: 0 !important; - max-height: 15px !important; + max-height: 0.9375rem !important; /* 1 greater than cta layer. */ z-index: 4 !important; } diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-cta-button.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-cta-button.css index 7660b0dcee37..0e135afb4e34 100644 --- a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-cta-button.css +++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-cta-button.css @@ -4,25 +4,25 @@ in story-ad-button-text-fitter.js */ .i-amphtml-story-ad-link { background-color: #ffffff !important; - border-radius: 20px !important; + border-radius: 1.25rem !important; box-sizing: border-box !important; - bottom: 32px !important; + bottom: 2rem !important; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.16) !important; color: #4285f4 !important; font-family: 'Roboto', sans-serif !important; font-weight: bold !important; - height: 36px !important; - letter-spacing: 0.2px !important; - line-height: 36px !important; + height: 2.25rem !important; + letter-spacing: 0.0125rem !important; + line-height: 2.25rem !important; overflow: hidden !important; /* no important on opacity b/c ff does not allow keyframes to override. */ opacity: 0; - padding: 0 10px !important; + padding: 0 0.625rem !important; position: absolute !important; text-align: center !important; text-decoration: none !important; - min-width: 120px !important; - max-width: calc(100vw - 64px); + min-width: 7.5rem !important; + max-width: calc(100vw - 4rem); } [cta-active].i-amphtml-story-ad-link {