Are you getting mobile usability errors in Google Search Console or GSC such as “Text too small to read”, “Clickable elements too close together“, and “Content wider than screen” all of a sudden? Then you are probably at the right place!
Sometimes these mobile-friendly errors or mobile usability issues are natural and caused by some bad advertisement banner alignment and sizes. Sometimes it happens because the CSS or javascript files were not loaded properly or it got blocked by the robots.txt file. But one thing most webmasters don’t know is that Google has a crawl budget for every website that got listed in their index. I will explain them all in this article today!
1. Ads Are Bigger Than Mobile Screen Size
A lot of us webmasters use ads on our website to monetize or generate revenue from it. But most new webmasters don’t pay much attention to how the ads load on the page. Adnetworks which does not provide flexible or adaptive size ads, which have fixed width and height can be a problem for mobile devices’ smaller screen sizes and viewports.This can cause mobile usability errors, the most prominent one is “Content wider than screen“. How can you fix it? I will explain below.
Usage of flexible or adaptive ads
You may use the ads that have a flexible viewport that adapts to the screen size of the device. This is standard practice for modern and big ad networks like Adsense. So obtaining flexible or adaptive size ads may not be an issue for you!Usage of CSS to make the ads viewport flexible
You can use CSS to make your ads respect the size of the device’s screen/viewport. The CSS should have a max-width value that should be the same as the ad banner’s width. And a normal width that we put “width: 100%” instead of any fixed sizes so that it will fit the screen if the screen size is smaller than the width of the ad. If the screen size is bigger than the width of the ad, the CSS will use the max-width value which is the same as the width of the ad. So it will be fine for every device’s viewport. Height is fine because it is the vertical size of the ad.You may use the CSS below, you can change the values as per your needs.
CSS:
.ads_mobile {
margin: 0px auto 20px auto;
max-width: 728px;
width: 100%;
height: 90px;
overflow: hidden;
}
HTML:
<div class="ads_mobile">
<your ad-code>
</div>
