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">

MobileFriendlyTest.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.


MobileFriendlyTest1.PNG

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



img{
    max-width: 100%;
    height: auto;
}


MobileFriendlyTest2.PNG

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


- In Google Search Console, Select the option Mobile Usability


MobileFriendlyTest3.PNG

- Select the "Content wider than screen" option.


MobileFriendlyTest4.PNG

- Click the "VALIDATE FIX" button


MobileFriendlyTest5.PNG

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


MobileFriendlyTest6.PNG

- URL Inspection > LIVE TEST


MobileFriendlyTest7.PNG