Banner Doesn't Fit or Overflows Sidebar

If your banner ad appears too wide, cuts off, or overflows past the edges of your theme’s sidebar or widget container, this guide will show you how to quickly fix it.

---

Why Is the Banner Too Wide?

In AdFuz, each Ad Space is configured with explicit width and height dimensions in pixels (e.g., 300px × 250px, 336px × 280px, or 728px × 90px).

When an Ad Space is placed in a widget area or sidebar:

1. Container Width Mismatch: If your theme’s sidebar width (or inner container padding) is smaller than the configured Ad Space width (e.g., sidebar inner width is 270px, but Ad Space width is set to 300px), the banner will overflow.
2. Fixed Pixel Rendering: The placeholder and banner wrapper maintain the configured pixel width unless restricted by theme styles or responsive CSS.

---

Solution 1: Adjust the Ad Space Dimensions (Recommended)

The cleanest fix is to match the Ad Space dimensions directly to your theme’s sidebar width:

1. Log in to your WordPress Admin Dashboard.
2. Navigate to AdFuz > Ad Spaces.
3. Locate the Ad Space used in your sidebar (e.g., Ad Space #1) and click Edit.
4. Adjust the Width (px) and Height (px) values (for example, if set to 300px, change it to 260px or 270px to match your sidebar width).
5. Click Update Ad Space to save changes.
6. Clear your browser or caching plugin cache and refresh the frontend page.

WordPress Admin
└── AdFuz
    └── Ad Spaces
        └── [Edit Ad Space]
            ├── Width (px): [e.g., 270]  <-- Adjust to fit sidebar
            └── Height (px): [e.g., 225]

---

Solution 2: Make Banners Auto-Fit via Responsive CSS

If you want banners to automatically adapt to any container or screen size without hardcoding exact pixels, you can add responsive CSS to your WordPress theme.

1. Go to WordPress Admin > Appearance > Customize.
2. Select Additional CSS (or open your theme’s custom CSS editor / child theme style.css).
3. Add the CSS snippet provided below to force AdFuz containers and media to respect container boundaries.
4. Click Publish.

/* Ensure AdFuz ads and placeholders adapt to container width */
.adfuz-ad-placeholder,
.adfuz-ad,
.adfuz-ad img,
.adfuz-ad-media img,
.adfuz-ad-media iframe,
.adfuz-ad-media video {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

Why this works

This CSS rule ensures that no matter what fixed dimensions are specified in the Ad Space settings, the ad container and media will never exceed 100% of the parent sidebar or widget column.

---

Solution 3: Check Image & Slider Dimensions

If you are using Image Ads or Slider Format:

• Image Aspect Ratio: Ensure that the creative uploaded under AdFuz > Ads matches the aspect ratio of the Ad Space. For example, uploading a wide landscape banner into a square Ad Space may result in unintended cropping or letterboxing.
• Slider Navigation: If using Slider mode (Ad Space Format: Slider), ensure your sidebar container has sufficient horizontal room for navigation arrows, or toggle off arrows in the Ad Space settings if space is limited.

---

Need Further Help?

If the banner is still not fitting properly:

1. Inspect your page with browser DevTools (Right Click > Inspect) to verify whether your theme’s sidebar container has fixed padding or overflow properties (overflow: visible).
2. Reach out to our support team with your page URL and sidebar width specifications.