Excessive Header Size
DanielHerr opened this issue · comments
Summary
In many cases, the size of the header is excessive, taking up a third of the body size.
URL
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
Reproduction steps
- View a page on MDN
Expected behavior
A minimal header footprint or one which isn't stickied as the page is scrolled down unless using large screens on desktop monitors.
Actual behavior
The header is present on phones and laptops and takes up too much space when trying to read content.
Device
Laptop, Phone
Browser
Chrome
Browser version
Stable
Operating system
Android, Chrome OS
Screenshot
Anything else?
https://github.com/orgs/mdn/discussions/680
Validations
- I have read the Community Participation Guidelines.
- I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.
I have managed to reproduce on Windows with Chrome on a 1084 × 722 , 996 × 722 to 895 × 722 browser viewport.
header.viewport.breakpoint.mov
@DanielHerr Thank you for raising an issue on MDN. Could you use https://whatismyviewport.com/ or a similar site to provide the viewport you are seeing this issue on mobile?
Laptop: 1200 × 665
DPR: 2.00
Screen Size: 1200 × 800
Phone: 353 × 597
DPR: 3.06
Screen Size: 353 × 725
Regardless of the breakpoint related laptop issue, the header in general just takes up space while reading articles, so I would prefer if it was not sticky positioned or if the user had the option to control such.