Last update: October 1, 2018

How to fix the gap problem on mobile view

Sometimes on mobile mode we can see a big gap on the right side of the pages. It's not always easy to find where the problem comes from, so here is a little tip to help you to find it :


Step 1

On Chrome (or Firefox), open the DevTools (F12) and activate the mobile mode :

Select the Responsive mode and drag the border to change the size, until you see the gap clearly :

Step 2

In the DevTools, go to Elements, click on the <head> tag and add this CSS in *, *::before, *::after

border:1px solid red

So it becomes like this :


Click on the + sign :

And add  " * { border: 1px solid red; } " :

The page will look like this :

Just scroll down until you see the problem :

Here it was pretty obvious but sometimes it's not that easy to find. With this method it will be much easier and faster.

Special thanks to René Hornig for this tip.