Regaining Gmail screen space: A nice hack to give you more breathing room

Take control over your Gmail screen. This slick little combination of some CSS and a Chrome plugin will help you modify how your screen looks and behaves.

I'm writing this on my big 38-inch ultra-wide monitor in my office, which also happens to benefit from a spare 27-inch screen on the side. But I often catch up on my email using a machine that has a tiny 1600x900 screen.

Also: How to back up your Gmail: The ultimate guide for 2020

On that screen, every pixel counts. So, when Google added the interface for Meet right at the bottom of my folders, I felt it. While I could certainly scroll to get to those labels, my label arrangement has been built up over time and fits my productivity perfectly.

hack-1.png

There is a handle that reduces the size of that area, but it won't close completely. The lines beginning in Meet, Start, and Join keep the obstructing area about three lines too high.

hack-2.png

I wanted those pixels back. In this article, I'm going to show you some behind-the-scenes tricks that will allow you to tinker with your live web pages and sometimes make changes that will improve what you see.

Also: Five secret tricks only serious Gmail ninjas need to know

I did a similar hack back in 2015 when Todoist changed its icon colors. The trick is to modify the CSS of the web app, and then use a Chrome extension to make that hack stick.

Identifying the CSS

Let's start by identifying the CSS. To do that, we'll use Chrome's built-in Inspector. Most browsers have something similar, so if you're using Edge. Firefox, or Safari, this should work similarly on those browsers.

First, right-click on the area you want to change, and select Inspect from the pop-up window.

hack-3a.png

An HTML inspector will show up on the left side of the screen. I like to use the element selector to find the HTML I want to work with.

hack-4.png

Next, move around on the page until you've highlighted the block you want to deal with.

hack-5.png

Once you find the block you want, click, and you'll select the HTML.

hack-6.png

What you want to do next is right-click and choose Copy Selector from the Copy menu. This will put the following line on your clipboard.

body > div:nth-child(21) > div.nH > div > div.nH.bkL > div.no > div.nH.oy8Mbf.nn.aeN > div.akc.aZ6.YX > div.YM.pp.Zk.aj3

That is your selector. A selector is the address on the DOM (document object model) for the webpage. It's the way you tell CSS how to specifically target a chunk of code.

Also: Gmail quick tip: Use color-coded labels to organize your inbox

Now change the styles

To change the styles on a semi-permanent basis, I like to use the StyleBot Chrome extension. It will put a little tiny CSS icon on your browser bar. Click on it and select Open Stylebot.

hack-7.png

You'll see a screen like this:

hack-8b.png

Select Edit CSS. Into that area, paste your selector.

hack-9.png

After, you'll want to add the following, an open bracket, the words "display:none;" and a close bracket. Here's how it looks:

hack-10.png

Hit Save at the bottom right side of your Gmail screen and look at the bottom left. Notice that the Meet text is gone.

hack-11.jpg

Go ahead and close the StyleBot panel by clicking the X at the upper right corner.

hack-12.jpg

Finally, hover over the top of the newly blank area until the little horizontal line dragging bar shows up, and pull it down.

hack-13.png

Now, whenever you go to your Gmail, you'll be able to drag the obstructing block down and reclaim those three covered-up email labels.

And, if you ever do want the Meet menu back, you can go back into StyleBot, go back into Edit CSS and either delete the styling or wrap it in /* */ comment tags. That disables the CSS inside them from running, but lets you keep the code for later removal or further tinkering.

Also: Gmail quick tip: How to search in your inbox Primary category only

That, kiddies, is how you hack a web app to make it do what you want it to do. Have fun. Oh, and understand that if Google changes its code, the hack may stop working. That's why you want to know how to do it, not just copy it from my article.

Practice. I've used this technique a bunch of times to overcome web-based annoyances. You can use this technique on almost any web page and change how it presents itself to you. Just note: if you have multiple machines, the stylebot settings won't sync. You'll have to paste your custom styles in on each machine.

Have you customized the style of web apps or web pages? Let us know in the comments below.


You can follow my day-to-day project updates on social media. Be sure to follow me on Twitter at @DavidGewirtz, on Facebook at Facebook.com/DavidGewirtz, on Instagram at Instagram.com/DavidGewirtz, and on YouTube at YouTube.com/DavidGewirtzTV.