by gloomy-corner

Fixing a web page displaying half screen on mobile

If your mobile usability report from Google Search Console shows error of “Content wider than screen” and your page shows up only half screen on mobile, the page is likely to have content too wide, like a table.

To fix that, you need to find the elements whose content is too wide on mobile.

If the element is a form or someone which can be designed as responsible, then use a responsible design like Bootstrap.

If the element is a table which holds too many columns and can not be designed to be responsible to the screen width, then add a horizontal scrollbar for it.

Note

A table containing too many columns can not become responsible by setting its CSS width as auto on mobile devices.

Add a horizontal scrollbar for a table

Add a container with scrollbar for the table to make it scrollable horizontally if needed:

<div style="overflow-x: auto !important;">
  <table>
    <thead>
      <tr>
        <th>20010101</th>
        <th>20020101</th>
        <th>20030101</th>
        <th>20040101</th>
        <th>20050101</th>
        <th>20060101</th>
        <th>20070101</th>
        <th>20080101</th>
        <th>20090101</th>
        <th>20100101</th>
      </tr>
    </thead>
  </table>
</div>

Reference