#CSS Tricks ” How to remove the Obstructing ‘sign-in block’ on a Facebook page without actually signing in”

  • Sumo


If you are reading this, it is pretty obvious that you are not amused by the login box that covers part of the Facebook page content when you are not logged in, it’s okay this article is written precisely for you!

So, how to actually get rid of this annoying sign in box that prompts you to sign in to view the full Facebook page. Else, you have to contend with it obstructing part of the page while reading it.

Again, one can safely assume that a user who is not signed-on cannot or is not easily tracked across their web surfing with certainty. This is done for better ad targeting and who knows what else, ‘wink-wink.’ No matter, it makes your identity not so obvious, this is done for your good and for Facebook’s good too!

Nothing for free…Okay!

This is how it looks.

Facebook login box

Here are the steps:

1. Click on theNot Nowtext link.

You’ll notice that the box does not go away but it docks itself at the bottom of the page. It is fairly chunky, so, it still makes it difficult to enjoy viewing the page.

2. Now position your cursor over the box making sure that it is on the box and not the text.

This is important because everything on the web page is an individual element positioned on the page by the use of #CSS. You will learn CSS on another tutorial that will follow in the future, right now that’s not important.

3. Right-click on the box and select “Inspect” on the menu that pops up.

NB* I’m assuming you are using the Chrome browser and this tutorial assumes such. If not then… I mean, “dude!”


Next, something that looks like this will pop out

4. Look for the line similar to the one highlighted on the image, where it says ‘style=display:block“;’

If you followed the instruction as above and right-clicked on the “box element thingy”, the highlighted text will be the one, well, highlighted. Otherwise locate it using the image above as a guide.

5. Now comes the fun part.

Double-click it and edit the text where it says “display:block” and change it to “display:none“.

6. Click Enter(on your keyboard) and close(X) the code pop up. By the way that is the source code for the page you are viewing(again about this later).


‘Voila’, you can now enjoy your page without the distracting bulky box in front of it! But, here’s a thing though, if you happen to refresh the page, the box will be back*. No worries though, because you can now use your newly discovered trick(albeit just one“) to banish it once more.

*The box comes back because we are not editing the original source code or CSS of the the page. Our browser is so clever that we can actually modify any web page’s style right on the browser.

All modern browsers can do this, but we like Chrome better, Okay!