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 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 »
When creating a dropdown menu in WordPress, often the parent menu item is used simply as a hover point to access the submenu, not as an actual link. When this is the case, we can use the following steps to indicate to the user that these menu items are not to be clicked. 1. Set
Disable Clicks on Empty Menu Items Read More »
Sometimes you just want to style all the links pointing to a certain site, or containing a certain string in the URL. For example, styling all links to Wikipedia to stand out from regular links or hiding all links that include “registration” in the URL. It’s just a matter of using: href*= in the CSS
Styling links based on partial URLs with CSS Read More »
Google’s reCAPTCHA can easily overflow it’s parent at small screen sizes. Let’s fix that. Since the reCAPTCHA sits inside an iframe, we can’t target its individual elements with CSS. We can limit the iframe’s width, but that simply hides any part of the iframe that doesn’t fit within our new width. The code below reduces
Resize Google reCAPTCHA with CSS Read More »
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 »
Update: After further testing, it appears that a bug in Internet Explorer prevents the drop down menu from opening. There are a number of ways to get around this IE bug, but I’m not going to go into that here. I was building a drop down menu while working on a personal project and I
Simple CSS Drop Down Menus Read More »
Note: Here is another post originally written for my blog over at sackclothstudios.com. However, with the changes I’m making to that site, I figured the post would be of more use here on this site. Outline is a seldom used and often misunderstood CSS property. An outline is a line that is drawn around an
Outline: the Ignored CSS Property Read More »