> Canonical URL: https://codingcat.dev/post/how-to-achieve-16-9-resolution-while-using-divvy-on-a-mac
# How to achieve 16:9 resolution while using Divvy on a Mac
✏️ Blog PostMarch 19, 2022[WebDev](/topic/webdev)[Firebase](/topic/firebase)[Google Cloud](/topic/google-cloud)[Cloudinary](/topic/cloudinary)[AI & Agents](/topic/ai)[Video](/topic/video)
# How to achieve 16:9 resolution while using Divvy on a Mac
[Alex Patterson](/author/alex-patterson)
Have you ever tried to record a video and notice that it is a few pixels off? Lets fix that so you can produce good quality videos!
## Easy Solution
So before I go down this crazy exercise, I do want to call out one of the simpiliest tricks to when recording videos. Just hide the menubar on MacOS.
## Is this still a dev post?
Most of the time as a developer I am looking for cool side projects. It just so happens that I have been looking for an excuse to try out Remix as we have been looking to partner with them at [Builder](https://builder.io/?utm_source=codingcatdev).
What I wanted to do was create a simple tool that would calculate what to set Divvy's margins to so that I can capture my screen correctly for recording both at [Builder.io](https://builder.io/?utm_source=codingcatdev) and [CodingCat.dev](https://codingcat.dev).
I wanted to have a little fun with it and added a downloadable background for you computer that has the menubar set, the margins called out, and the amount of boxes you are using within Divvy add by using [Cloudinary's React SDK](https://cloudinary.com/documentation/react_integration?utm_source=codingcatdev) and overlays.
> Dont care about the math? Cool I don't really either but I needed to understand it to write this purrfect Divvy Calculator. See something broken, PR's more than welcome. GitHub Repo
Quick example of the Cloudinary transformation code below.
Copied! 🐾
```
// Apply the transformation.
myImage
// Crop the image.
.resize(thumbnail().width(reducedWidth).height(reducedHeight))
//Menu Bar
.overlay(
source(
image(`1`).transformation(
new Transformation()
.resize(fill().width(Math.round(reducedWidth)).height(Math.round(menuBarHeight)))
.effect(new ColorizeEffectAction().color('#391').level('colorize'))
)
).position(new Position().gravity(compass(northWest())))
)
//Margin left
.overlay(
source(
image(`1`).transformation(
new Transformation()
.resize(
fill()
.width(Math.round(reducedScreenMargin / 2))
.height(Math.round(reducedScreenHeight))
)
.effect(new ColorizeEffectAction().color('red').level('colorize'))
)
).position(new Position().gravity(compass(northWest())).offsetY(reducedMenuBarHeight))
)
.overlay(
source(
image(`1`).transformation(
new Transformation()
.resize(
fill()
.width(Math.round(reducedScreenMargin / 2))
.height(Math.round(reducedScreenHeight))
)
.effect(new ColorizeEffectAction().color('red').level('colorize'))
)
).position(new Position().gravity(compass(northEast())).offsetY(reducedMenuBarHeight))
);
```
## MacOS and the menu bar
When you are using a display on a Mac the windows all stay under the menu bar at the top. So your beautify 4K monitor that you are recording on will be in a purrfect 56.25% ratio (2160/3840) also commonly referred to as 16:9 (9/16).
So if you screen is 4K 3840px by 2160px, and your menu is 24px high then your actual usable height is 2160px - 24px => 2136px. Which of course means it will be 3840px by 2136px so if we divide 2136/3840.
## How Divvy Window Manager Works
[Divvy](https://mizage.com/windivvy/) allows you to break your monitor up into sections columns by rows shown below.
This is an amazingly simple, but yet very powerful tool. You can break your screen up into anything from 1x1 all the way to 10x10 blocks. There are a lot more features check out the below video to see more of what is possible.
## What is the big deal
So if you are using Divvy Window Manager and placing your windows into 4 equal locations, what this really means is that you will end up with a ratio closer to 55.625%. This small difference of only .625 might not seem like much but when you are producing a 4K screen capture those 40+ pixels really show up (trust me)!
## Resources, Links & Official Documentation
- [**MDN Web Docs for Developers:**](https://developer.mozilla.org/en-US/docs/Web) Core web platform standards, browser APIs, and performance guides
## Related CodingCat.dev Tutorials & Podcast Episodes
- [**The Firebase plugin is now available in Codex: Web Architecture & Implementation Guide**](/post/firebase-2026-09-firebase-plugin-for-codex): Hands-on web engineering breakdown of "The Firebase plugin is now available in Codex" (2026-09-28). Learn how to integrate Firebase, Google Cloud, Web Dev, AI i...
- [**Introducing Firebase spend caps: Web Architecture & Implementation Guide**](/post/firebase-2026-09-firebase-spend-caps): Hands-on web engineering breakdown of "Introducing Firebase spend caps" (2026-09-14). Learn how to integrate Firebase, Google Cloud, Web Dev, AI in production w...
- [**5 ways to use Gemini text-to-speech (TTS) in your apps with Firebase AI Logic: Web Architecture & Implementation Guide**](/post/firebase-2026-09-ai-logic-text-to-speech): Hands-on web engineering breakdown of "5 ways to use Gemini text-to-speech (TTS) in your apps with Firebase AI Logic" (2026-09-09). Learn how to integrate Fireb...
✏️ Visual Architecture Diagram
## how this post connects together.
Follow AJ from first principles to production-ready architecture.
Let’s build it!✏️ Visual Diagram: How to achieve 16:9 resolution while using Divvy…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for How to achieve 16:9 resolution while using Divvy on a Mac: start with How to achieve 16, implement Hands-On Implementation, and ship to production.AAA Contrast Verified▶ Watch on @CodingCatDev YouTubeRelated Blog Post & Video
## Watch the Related Video Deep Dive: Sanity Knowledge Bases
Eliminate query-time guessing in your AI agents. Learn how Sanity Context Knowledge Bases compile structured datasets, crawled documentation websites, and uploaded files ahead of time, resolve conflicting facts, and serve a compact outline over Context MCP.
[View Full Page →](/post/sanity-knowledge-bases)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=jm5Vq60qYTk&list=UUnKZ8gEb78zXKMi1ns-IQ2g)
## related deep dives.
[All Blog Posts→](/blog)[](/post/firebase-2026-09-firebase-plugin-for-codex)September 29, 2026[Firebase](/topic/firebase)[Google Cloud](/topic/google-cloud)
### [The Firebase plugin is now available in Codex: Web Architecture & Implementation Guide](/post/firebase-2026-09-firebase-plugin-for-codex)
Alex Patterson's hands-on web engineering breakdown of "The Firebase plugin is now available in Codex" (2026-09-28). Learn how to wire up Firebase, Google Cloud, Web Dev, AI in production web apps.
[Alex Patterson](/author/alex-patterson)[](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)October 26, 2026[AWS](/topic/aws)[AI & Agents](/topic/ai)
### [Anthropic's S-1, $518B in cloud commitments, and circular AI capex](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)
Anthropic just filed its Form S-1 for a Nasdaq IPO under ticker ANT, revealing $518B in take-or-pay cloud commitments to Google, AWS, and Microsoft. Here is how Mark Zuckerberg, Elon Musk, Jensen Huang, Sundar Pichai, Satya Nadella, Tim Cook, and Dario Amodei built a circular revenue machine, and what happens to your S&P 500 ETF if it stalls.
[Alex Patterson](/author/alex-patterson)