Member Avatar for webreaker

I created a div zone for advertising on top of my site, but when I reduce or increase the size of the pages [Ctrl +] or [Ctrl -].advertising is not reduced.

  • 2 Contributors
  • 2 Replies
  • 85 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by webreaker

Dani AI

Generated

— was on the right track about wrapping the page. Fixed, pixel‑based ad blocks and floated elements often do not behave like the rest of a fluid layout when users zoom or when only text zoom is applied by the browser. The reliable solution is to make the page container fluid and the ad elements responsive so they scale visually and reflow with the layout.

A simple, modern pattern is a centered wrapper plus a flexible ad row and responsive media. Example (replace your IDs with semantic classes and use your real ad markup):

<div class="site-wrap">
  <div class="ads">
    <div class="ad ad-main"><img src="..." alt=""></div>
    <div class="ad ad-side"><img src="..." alt=""></div>
  </div>
</div>

.site-wrap { max-width: 980px; margin: 0 auto; box-sizing: border-box; padding: 0 10px; }
.ads { display: flex; gap: 20px; align-items: center; }
.ad-main { flex: 1 1 auto; max-width: 728px; }
.ad-side { flex: 0 0 200px; }
.ad img, .ad iframe { max-width: 100%; height: auto; display: block; border: 0; }

Troubleshooting: use DevTools (inspect computed width while zooming), check whether the ad is served inside an iframe (those often require responsive units from the ad provider), and make sure no CSS zoom or transform is forcing scale. For responsive rules see MDN on max-width and box-sizing, and read about responsive images at MDN Responsive Images.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

sorry...you may want to post the relevant code. Every page that I access on your site has me waiting 15 seconds before the content is accessible.

my guess is that you dont have a div "wrapping" your content... therefore as you zoom in and out, the div is shifting.

Member Avatar for webreaker

here is my code in the theme:

<div id="Ads1">Ads1</div>
<div id="Ads2">Ads2</div>

and the css is:

#Ads1 {
    float: left;
    width: 728px;
    height: 90px;
    margin-left: 152px;
    padding-bottom: 5px;
    padding-top: 5px;
}

#Ads2 {
    float: left;
    width: 200px;
    height: 90px;
    margin-left: 32px;
    padding-bottom: 5px;
    padding-top: 5px;
}

please I'm not familiar with css, can you give me the correct code to do the same thing

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.