ampproject
🐛Story Ads UI appears very small on 4k monitor
Repro dimensions Monitor resolution: 3840x2160 Inner window size: 1920x1750
This appears to be an issue across all system layer components. Need to investigate if it also affects things like page-attachment.
Hello! I just recently sent in a PR to debug this issue. I made a couple of changes to the CSS in order to make the button and its contents sized dynamic to the screen. #38549
Hi! I would like to work on this issue. Could you please provide more details on the expected behavior or any guidelines for fixing it? I'll investigate and submit a PR soon.
Hello maintainers, I'm interested in working on this issue. Is there anything specific I should consider before getting started?
Hello I am wondering if I can work on this issue. Is there anything I need need to consider before working on this issue?
Hi! I noticed that a PR (#38549) was made to address this issue. Is this issue still open for contribution? I’d love to work on it if it needs further improvements!
Hey! I started working on this and opened a PR to fix it. Let me know if anything needs changing
Hi everyone! 👋 I noticed that this issue has been open since 2021 and a few pull requests were created to address it (like #40273). Just wondering — is there a reason why it hasn’t been closed yet? Is additional work needed or is it waiting for review/approval?
I’d love to understand the current status — thanks in advance! 🙏 @calebcordry
Hi 👋
Thanks for keeping this issue open and visible — I’ve reviewed the history including PRs like #38549 and #40273, and I really appreciate the effort made so far to improve Story Ads UI on high-resolution displays.
That said, if this issue still needs refinements or review-based updates, I’d love to help finalize and polish the solution. Let me know if additional testing on specific resolutions, responsiveness tweaks, or accessibility checks are needed — happy to contribute actively to get this merged and resolved ✅
Looking forward to collaborating!
— Bhumit Mittal
Hi! I’d like to work on this issue. I will adjust the Story Ads UI scaling so it adapts properly to high-resolution displays like 4K monitors. Could you confirm if the fix should apply to all system layer components, including page-attachments?
The Issue: Your website looks weird because your computer screen and browser aren't talking to each other properly. You have a really nice 4K monitor (3840x2160 resolution), but your browser thinks it's only half that size (1920x1750). It's like having a big TV but only using half the screen. Why This Happens: Your computer is trying to be helpful by making everything bigger so you can read it better on your high-resolution monitor. It automatically scales everything to 200% size, but your website doesn't know how to handle this scaling properly.
What You're Seeing: Your navigation bar, pop-up menus, and any floating elements probably look off - maybe too small, too big, or positioned in weird places. It's especially noticeable with things like dropdown menus, modals, and sticky headers. The Simple Fix: Think of it like adjusting your TV settings. You need to tell your website "hey, work properly with my fancy monitor." This involves:
Adding a simple line of code that tells browsers how to handle your screen size Writing some CSS rules that say "when someone has a high-resolution display, adjust things accordingly" Adding a bit of JavaScript that detects what kind of screen someone is using and adjusts automatically
Quick Temporary Workaround: If you need a quick fix right now, you can change your computer's display scaling from 200% back to 100% in your display settings. Everything will be smaller, but your website will work normally. Why This Matters: More and more people have high-resolution monitors these days, so fixing this ensures your website looks good for everyone, not just people with standard displays
I am new to contributing. Can i work on this project if it is still open??
Hi! 👋
I've submitted a PR to fix this issue: #40419
Summary of the fix:
- Updated CSS to use responsive viewport units with maximum bounds
- Ad badge, attribution logo, and text now scale proportionally on 4K displays
- Added device pixel ratio detection for future enhancements
- Comprehensive unit tests included
The fix ensures UI elements are properly sized on 4K monitors while maintaining appropriate sizes on standard displays.
Tested on:
- Standard displays (1920x1080, DPR = 1) ✅
- High-res displays (DPR = 2) ✅
- 4K displays (3840x2160, DPR = 2.5) ✅
- Various browser zoom levels ✅
Ready for review! 🚀
Hey Maintainers,
It looks like the small UI issue on 4K monitors happens because amp-story-auto-ads uses fixed pixel values that don’t scale properly on high-DPI displays. We could fix this by switching to relative CSS units and adding responsive media queries.
Example:
@media (min-resolution: 2dppx), (min-width: 2560px) {
.i-amphtml-story-auto-ads-button {
font-size: 1.25rem;
padding: 0.75rem 1.5rem;
}
}
Optionally, we can detect window.devicePixelRatio to fine-tune scaling for very high-resolution screens. This should make the Story Ads UI look consistent and readable across 1080p, QHD, and 4K monitors.
Hello maintainers, I'm interested in working on this issue. Is there anything specific I should consider before getting started
“Hi, I’d like to work on this issue. Can you please assign it to me?”