CSS

Improving Beaver Builder’s Video Lightbox

For some reason, Beaver Builder’s video lightbox opens quite small, even on large screens. I wanted the lightbox to take up most of the screen, so I used the following CSS to make that happen: .mfp-iframe-holder .mfp-content { max-width: 95%; aspect-ratio: 16/9; height: auto; } @media (min-aspect-ratio: 16/9) { .mfp-iframe-holder .mfp-content { height: 95%; aspect-ratio: …

Improving Beaver Builder’s Video Lightbox Read More »

CSS Hover: Targeting Mouse Input and Ignoring Touch Input

CSS hover states are pretty obviously targeted at mouse inputs, but are applied in strange ways to touch inputs as well. Thankfully, all modern browsers now support input-based media queries. This allows us to apply our hover states only to devices that truly support hover states. Here is the code that makes it work: @media(hover: …

CSS Hover: Targeting Mouse Input and Ignoring Touch Input Read More »

Font-size and Line-height for <pre>, <code>, and Other Monospaced Fonts

While attempting to create a consistent cross-browser font baseline, I ran into the following strange behaviour in certain browsers (not IE for once!). Any monospaced font was rendered smaller than the surrounding text, even when specifically set to display at 1em. I found this to be true in both Firefox and Chrome. After a bit …

Font-size and Line-height for <pre>, <code>, and Other Monospaced Fonts Read More »