Page is not mobile friendly - Content wider than screen

Our web site failed mobile friendly test like the following image and Google says "Content wider than screen"

How To Create Responsive Images

<img src="/Content/Upload/FetchAsGoogle_1.PNG" alt="FetchAsGoogle_1.PNG">


We're having trouble with images that are wider than the screen on our website.

According to the mobile UI, as you can see in the image below, the image is wider than the screen.


Only mobile affected. Google has come back saying it is affecting usability.

We fixed this issue using CSS. Add this code in your css file. It should work for you.

If you want an image to scale down, but never scale up to be langer than its original size, use max-width: 100%

- Set the CSS max-width property to 100% and height to auto

    max-width: 100%;
    height: auto;


After solving this issue, we don't have any problem with Google.

- In Google Search Console, Select the option Mobile Usability


- Select the "Content wider than screen" option.


- Click the "VALIDATE FIX" button


We are waiting for the approval of the fix by Google.


- URL Inspection > LIVE TEST