CSS to Force Element Full-Width When Inside a Max-Width Container

container element with full width element inside

If an element like a image is wrapped by a container that has a limited width, how do you make the inner element expand outside the bounds of its container to stretch full-width of the browser window?

I used to think it could only be done with Javascript.  The reason is because there was a WordPress page builder that I used years ago that had a stretch full-width feature which used Javascript to accomplish it.

Well, thanks to the power of modern CSS, we can use calc() and vw solve this problem wonderfully!  Here’s how to do it. Continue reading CSS to Force Element Full-Width When Inside a Max-Width Container

How to Change VS Code’s Integrated Terminal to Git Bash

VS Code

When you first started using VS Code you may have dismissed that little notification in the corner that asked if you wanted to switch your integrated terminal.

In my case, running on Windows, the default terminal was set to Command Prompt (cmd.exe) which is just plain inferior to Git Bash which you probably already have installed if you have installed Git (which you should).

So, if you missed that notification that let you change it, how do you change it later?

Continue reading How to Change VS Code’s Integrated Terminal to Git Bash

How to Update an ACF Field Name Without Losing the Data

Advanced Custom Fields (ACF)

Are you using ACF (Advanced Custom Fields) and have the need to change the field name, but then you discover that it makes all the data disappear?

Since ACF uses the field name as the meta key to save and retrieve data, it makes it seem impossible to change.  You may consider changing only the label and leaving the field name alone.

However, in some cases, changing the name is needed.  If you’re in that boat, I’ve got good news.  It is possible to migrate all your post meta data to the new meta key.

In this post, I’ll show you exactly how to run a couple SQL statements on your database to migrate all the post meta data from the old key to the new key. Continue reading How to Update an ACF Field Name Without Losing the Data

Automatic Table of Contents Sticky Magellan Menu for WordPress Posts

Magellan Menu

See that sweet Magellan menu over on the right sidebar (if you’re not viewing the AMP version of this page)? →

Pretty cool right?

  • It acts as a nice table of contents for the post (and it’s 100% automatic!).
  • You can click the links to smooth scroll down to that section.
  • As you scroll, the visible section is highlighted.
  • It’s also inside of an awesome Theia Sticky Sidebar.

Continue reading Automatic Table of Contents Sticky Magellan Menu for WordPress Posts