A collection of useful code snippets.
Full Width Container with CSS
Here’s how you make a full-browser-width container when we’re inside a max-width/limited wrapper. HTML Full width parent container In this example my parent container is set at a max-width of 100% with a nested content wrapper. Constrained parent container In this example my parent container (.site-main) is set at a max-width of 1800px with a […]
Responsive Google Slides & YouTube Embeds with CSS
Here’s a simple way using only CSS to make your Google Slides & YouTube/Vimeo embeds look great on your website. The Solution Add the following CSS to your website. These CSS selectors will target any iFrame’s with the domains of docs.google.com, youtube.com, and player.vimeo.com and make them responsive with the aspect ratio of 16 / […]
Responsive Google Slides
By default, Google Slides won’t look very good when embedded on your responsive site. Fortunately, this issue is very easy to remedy with a bit of HTML & CSS. The Solution 👉 Heads up! There’s a easier & more modern solution using only CSS here. Just wrap the Google Slides embed code in a <div> […]