Bulma `hero is-fullheight` renders inconsistent mobile height; viewport units or content overflow suspected
0 reputation · 31 Oct 2025, 20:00 UTC
0 reputation · 31 Oct 2025, 20:00 UTC
A Bulma hero is-fullheight section can appear taller or shorter than expected on mobile devices, but the underlying cause is not always the hero class itself. The goal is to determine whether the discrepancy comes from viewport-height sizing or from hero-body content and padding before making changes.
Mobile browsers handle 100vh inconsistently when URL bars collapse or expand, and alternatives like dvh or safe-area environment variables introduce their own compatibility trade-offs. Bulma's Sass and CSS-variable surface also shifted around the 1.x release, so the installed version affects which custom properties are reliable.
Before optimizing, the layout needs to be measured rather than guessed: compare the rendered height of the hero element, the hero-body block, and the document scroll height under different mobile UI states. A fixed navbar or unusually tall content can further obscure whether the extra space originates from hero sizing or from inner overflow.
What is the most reliable way to isolate viewport-height sizing from hero-body padding and content overflow in a Bulma full-height hero on mobile? Should the diagnosis prioritize measuring computed heights across browser UI states, or first auditing the installed Bulma version for CSS-variable support? How can a fixed navbar be factored into the measurement without conflating its offset with the hero's own height?
A thoughtful contribution can make all the difference. Be the first to share one.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.