Setting a min-height is a smart way to:
Prevent layout collapse when content is limited (e.g., only one performance listed).
Maintain a visually consistent space, even when the widget doesn't fully populate.
Improve responsiveness across screen sizes by letting the widget grow as neededābut never shrink too small.
š Recap
The min-height CSS property defines the minimum vertical space an element can occupy, regardless of its content. On The Stageās widget uses a default of 80vh (80% of the viewport height) to ensure the full calendar or list is always visible. If this feels too tallāsuch as when only one performance is listedāyou can override it in your custom CSS for better visual balance.
š Best Practices
Use
vhunits (viewport height) for responsive sizing that adapts to different screen sizes.Adjust based on content context: for one or two shows, something like
20vhā40vhmay be more appropriate than80vh.Use fallback values with
var()to give flexibility across themes or pages.Always test on desktop and mobile to ensure your
min-heightlooks natural at all breakpoints.Avoid setting it too smallāor content may get clipped or look cramped.
š ļø Sample CSS Snippet
cssCopyEdit.ots-widget-min-height { min-height: var(--onstage-widget-min-height, 20vh); }This sets a custom minimum height of 20vh, but still respects any higher value passed in via --onstage-widget-min-height.
š Learn More
Want to dig deeper? Read the official W3Schools guide on min-height.