{
  "id": 12653978,
  "title": "How to Fix AdMob Banner Overlap in a Capacitor App",
  "url": "https://urgent.news/2026/10/07/how-to-fix-admob-banner-overlap-in-a-capacitor-app",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-07T15:30:04.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/capawesome/how-to-fix-admob-banner-overlap-in-a-capacitor-app-443k"
  },
  "original_language": "en",
  "account": "Using the AdMob banner in your Capacitor app can sometimes result in the Ionic tab bar being obscured by the banner. This issue arises because the Google Mobile Ads SDK treats the banner as a native view layered on top of the Capacitor web view. To resolve this, there are two primary solutions: allowing the plugin to adjust the web view's dimensions, or specifying the banner height using CSS.\n\nOne approach is to utilize the resize mode, which causes the web view to shrink to accommodate the banner, preventing it from covering your content. This method works well for both top and bottom banners. To implement this, call the showBanner() function with the mode parameter set to \"resize.\" The plugin will then adjust the web view's size based on the banner dimensions reported by the Google Mobile Ads SDK.\n\nHowever, there are certain scenarios where this method may not be suitable. For instance, if your banner sits within scrolling content, or if your layout should remain visible behind the banner, such as a full-screen map or game canvas, you may need to consider alternative approaches. In such cases, you can use the overlay mode, which keeps the web view at full size while positioning the banner on top of it.\n\nTo use the overlay mode, you'll need to register an event listener for the bannerSizeChanged event. This event provides the banner's width and height in CSS pixels, which you can then store in a CSS custom property. By setting this property, you can ensure that your content remains clear of the banner. It's crucial to register the event listener before calling the showBanner() function, as the SDK may send the size event before any listeners are attached.",
  "summary": "You add an AdMob banner to your Capacitor app, run it on a device, and the Ionic tab bar is gone, hidden under the ad. In this guide, we'll look at why the banner covers your content and fix it two ways: by letting the plugin shrink the web view, or by reserving the exact banner height in CSS. We'll also cover the Ionic CSS for tab bars, content and floating action buttons, and what changes if…",
  "key_points": [
    "AdMob banner can obscure Ionic tab bar in Capacitor app",
    "Resize mode adjusts web view dimensions to prevent banner overlap",
    "Overlay mode keeps web view full size, positions banner on top"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}