Diagnosing Layout Collapse in HTML5 Semantic Elements
Learn how to diagnose and fix layout collapse when HTML5 semantic elements like <main> and <section> behave as inline elements instead of block elements.
Loading…
ReadMeFeed / Community knowledge
#css-layout
Real questions. Useful conversations. Find the people who know your stack.
html5Bulma `hero is-fullheight` renders inconsistent mobile height; viewport units or content overflow suspected
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
Broken CSS layout calculations in QPageContainer
In Quasar Framework (Vue 3), the QLayout component relies on a specific hierarchy to calculate the height and scrolling behavior of the main content area. The QPageContainer is designed to wrap the router-view to ensure that QPage components receive the correct dynamic styling. A design uncertainty arises when implementing deeply nested layouts or custom wra
quasarBootstrap 5 form-floating label overlap during browser autofill
The .form-floating component in Bootstrap 5 is designed to animate labels above the input field when a value is present or the element is focused. This behavior relies on the presence of a placeholder to trigger the floating state. When a browser automatically populates these fields via autofill, the placeholder text occasionally remains visible simultaneous