How to Remove Black Border From Raspberry Pi Display

display with black border

One problem I often have when setting up a new Raspberry Pi on a display, is that the display doesn’t stretch to the entire area of the screen. Rather, there is a black border between the content on the screen and the display’s bezel. So annoying!

The following is what fixed the problem for me on multiple Raspberry Pi’s and displays. I’m using the latest (as of this post) Raspbian Stretch October 2018 version. If on a different version, the solution might be slightly different, but hopefully it works for you.

To get rid of the black border, we have to edit the config.txt file in the /boot directory.

To do that, open the terminal or SSH into your Pi.

In the terminal, type the following command:

sudo nano /boot/config.txt

This will open the config.txt file in nano, a simple text editor that runs in the terminal.

The file is about 60 lines of text or so. Use the Up/Down Left/Right buttons on your keyboard to navigate the document in nano.

Find the following line:

#disable_overscan=1

Now remove the # in front of the command so it reads:

disable_overscan=1

Anything with a hashtag in front of it is treated as a comment, meaning the computer ignores it. So by uncommenting the line (removing the hashtag), the computer will execute the command.

Type Ctrl+x on your keyboard to exit nano, and a little message at the bottom or the terminal will say, “save modified buffer?’.

Type y for ‘yes’.

Then the file name appears at the bottom of the screen. Don’t change it and hit Enter on the keyboard to save your changes.

This will save the file, and exit nano back into the terminal.

Now all you have to do is reboot your Pi.

Type the following into your terminal:

sudo reboot now

And hit Enter.

Your Pi should reboot without the annoying black border.

Force Footer to the Bottom of the Page the Simple Way

I’ve frequently ran into an issue with footers on web pages where there is not enough content to push the footer to the bottom of the screen, or below it. What you get is a footer sitting in the middle of your page, and it just looks bad.

It’s easy to give the footer a fixed position, which will solve the problem on pages that don’t have enough content. The issue I have with this is that the footer is then always visible, which looks bad on pages with more content.

So what we want to do is push the footer to the bottom of the page only if the height of our page content is less than the height of the display.

When you do a search, you’ll get tons of answers on how to do this with jQuery or a bunch of CSS rules. I found that most of the solutions seemed overly complex for what seems like a simple problem. I finally found one solution that fixes the problem with only two lines of CSS.

The HTML

First wrap all of your main content in a div element and give it a class of “wrapper” (or call it whatever you want).

<body>
    <div class="wrapper">
        <h1>Main Content</h1>
    </div>
    <footer>
        <p>Footer Content</p>
    </footer>
</body>

The CSS

Now, make sure you give your footer a height.

Then use the calc() function to set the height of your wrapper equal to the height of the viewport (display), minus the height of the footer.

.wrapper {
    min-height: calc(100vh - 50px);
}
footer {
    height: 50px;
}

Now, if you have extra margins on your wrapper content you will have to increase the amount of pixels you subtract from the viewport height to reflect that. Other than that, this is a super easy and quick fix. No javascript needed, and only two CSS rules.

Disable Session Restore Message in Chromium for Raspberry Pi

chromium + raspberry pi

I was using Raspberry Pi’s as a digital signage solution. I had a network of Pi’s that would simply point to a website displaying a slideshow. I set up each Pi to automatically open Chromium browser to that website on boot. It’s a great solution because its so simple and has the added benefit of consuming very little electricity, since its running on a Raspberry Pi.

A huge issue I ran into though, was when there was a power outage, or if the Raspberry Pi was improperly shut off, Chromium would open with a little pop-up bubble saying: Chromium did not shutdown properly. Do you want to restore your session? The only way to get rid of it was to plug in a mouse to the Raspberry Pi and dismiss the message. Not ideal if you are planning to manage multiple digital signs this way, and it looks kind of unprofessional.

chrome restore bubble

I spent days trying to find a fix. There were plenty of solutions on various forums and websites, but they were all outdated and no longer worked on recent versions of Chromium.

Through my research I narrowed down the cause of this problem to the chromium preferences file, found in this directory:

/home/pi/.config/chromium/Default/Preferences

There are two variables in that file that let Chromium know on startup whether or not it shutdown correctly.

We want to make sure that exit type is set to Normal and that exited cleanly is set to true.

So let’s look at this file and make sure these values are set correctly. To do this from the command line, we will open the Preferences file in Nano, which is a very basic command line text editor. Type the following into the terminal:

sudo nano /home/pi/.config/chromium/Default/Preferences

This will open Chromiums Preferences file in the terminal.

We need to find the two values to make sure they are correct. You can either scroll to the right with the arrow keys on your keyboard, or if you type ctrl+w on your keyboard it will open up nano’s search function. Then you can search for the word ‘exited’ and find the two variables.

Depending on how chromium shut down the last time you had it open, these values may already be correct. They should look like this:

terminal screenshot

If this line of text looks correct, exit the nano editor with ctrl+x on your keyboard.

Nano will ask you if you want to save the changes. Type in ‘y’ for yes and hit enter. This will save and take you back to the terminal.

Now we have our Preferences file set correctly, but as soon as Chromium crashes it will change these values and we will get the dreaded popups.

So what we need to do is make a copy of the Preferences file that we just edited with the proper settings. Then we will write a bash script to replace Chromium’s preferences file with our good copy each time the Raspberry Pi boots up.

First create a directory (folder) to store our copy. From the terminal, type:

mkdir /home/pi/chromium_prefs

Then copy our updated Preferences file into this new directory. Type the following command:

cp /home/pi/.config/chromium/Default/Preferences /home/pi/chromium_prefs

This is using the linux cp (copy) command, which takes two parameters, the path to the file we want to copy and the path to the folder we want to copy it too.

Now we just need to create the bash script to copy our Preferences file over Chromium’s version everytime the Raspberry Pi starts up.

We are going to use the nano editor again:

sudo nano start.sh

This creates a blank file and opens it in nano.

Let’s write our script. It should look like this:

#!/usr/bin/sh

cp /home/pi/chromium_prefs/Preferences /home/pi/.config/chromium/Default
chromium-browser --kiosk

The first line is just the standard header for bash scripts.

The next line is where we are copying our Preferences file and replacing the one in Chromium’s Default folder.

The last line actually launches Chromium in kiosk mode.

The final thing we have to do is tell the Raspberry Pi to run this script on start up.

Type the following in the command line:

sudo nano /home/pi/.config/lxsession/LXDE-pi/autostart

Then add this line to the bottom of the autostart file.

@sh /home/pi/start.sh

That’s it! You can test this out by having Chromium open when shutting down your Raspberry Pi, and then booting it back up to see if you get the System Restore message.

It really shouldn’t be this difficult, as Chromium on a Raspberry Pi seems to be a popular solution for digital signage. But even though it takes a little effort, this solution works fine and I’ve used it for multiple digital signs. I hope this can help someone else.