diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css index c1c02fbc4aee..ad4d62cbbe57 100644 --- a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css +++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css @@ -1,13 +1,14 @@ +/* Responsive scaling for high-res displays */ .i-amphtml-ad-overlay-container { align-items: center !important; display: flex !important; - height: 48px !important; + height: min(3vw, 48px) !important; left: 0 !important; justify-content: center !important; pointer-events: none !important; position: absolute !important; top: 0 !important; - width: 48px !important; + width: min(3vw, 48px) !important; z-index: 100001 !important; } diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css index 4dedd1e43162..0413534b7744 100644 --- a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css +++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css @@ -54,14 +54,19 @@ amp-story-page amp-ad[type='adsense'] { max-height: 100% !important; } +/* Responsive scaling for high-res displays */ .i-amphtml-story-desktop-fullbleed .i-amphtml-fullbleed-ad iframe { width: 100% !important; height: 100% !important; + max-width: 100vw !important; + max-height: 100vh !important; } +/* Responsive scaling for high-res displays */ .i-amphtml-story-desktop-fullbleed .i-amphtml-fullbleed-ad .i-amphtml-cta-container { bottom: 0 !important; top: 0 !important; + font-size: min(2vw, 2rem) !important; } diff --git a/extensions/amp-story/1.0/amp-story-system-layer.css b/extensions/amp-story/1.0/amp-story-system-layer.css index 8c8032427e76..ed62dede46be 100644 --- a/extensions/amp-story/1.0/amp-story-system-layer.css +++ b/extensions/amp-story/1.0/amp-story-system-layer.css @@ -61,20 +61,22 @@ place-items: center !important; } +/* Responsive scaling for high-res displays */ .i-amphtml-story-attribution-logo { border-radius: 100% !important; border: 1px solid #d4d4d4 !important; - width: 28px !important; - height: 28px !important; + width: min(2vw, 28px) !important; + height: min(2vw, 28px) !important; object-fit: cover !important; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12) !important; } +/* Responsive scaling for high-res displays */ .i-amphtml-story-attribution-text { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; - font-size: 13px !important; + font-size: min(1.2vw, 13px) !important; font-weight: 500 !important; text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16) !important; color: #ffff !important;