Stop embedded Google Maps capturing the scroll wheel

The problem with full width google maps is that they capture the scroll wheel so the moment you hit them, instead of continuing to scroll the map itself starts zooming (in or out depending on the direction you’re scrolling). The simplest solution to stop this is to wrap the map in an identifiable div and use […]

Bootstrap 4 full width iframe inside a container

For semantic purposes sometimes you want to nest a full width item (in this instance a google map iframe) inside a .container element. Here’s the map: In order to make this full size you first need to remove the width and height properties from the url then you need to substitute some custom css. The […]

Bootstrap 4 Carousel and Chrome

Neither bootstrap 4’s carousel nor the .img-flex class works properly on Chrome. Instead of flexing the images proportionately it shrinks them widthwise while retaining the original height. The result looks a bit weird: This is actually fairly simple to fix all you need to do is add object-fit: contain; to the css for .img-flex. Unfortunately that […]

Rainbow text using css

I fancied making some rainbow text for a project I’m working on, and in order to maintain accessibility, I wanted to do it using css. It turns out that that isn’t actually too difficult. All you need to do is: generate a linear-gradient clip it to the text change the text colour to transparent set […]