CODEWITHSUNDEEP
htmlcssflexboxadsense
Tintin
Tintin

Reputation: 495

Adsense ads causing sidebar to go off the screen in a flex layout

I'm developing a website using the flexbox. The website appears perfect without google adsense ads. The problem arises when I'm inserting the adsense ads in the website which is causing the right sidebar to go off the screen.

There are four ads on each page, at the header, footer, right sidebar and infeed. If I remove the infeed ad and keep all the other ads than the layout is displayed ok, but the problem arises when I'm inserting the infeed ad. It is causing half of the right sidebar to go off the screen.

.site-content {
  display: flex;
  flex-direction: row;
  padding: 0 32px;
}

.left-sidebar {
  flex: 0 0 200px;
  max-width: 200px;
}

.right-sidebar {
  flex: 0 0 320px;
  max-width: 320px;
}

.main-section {
  flex: 1 1 auto;
  margin: 0 32px;
}

.infeed-desktop-ad {
  display: block;
}

.article-wrapper {
  display: flex;
  flex-direction: row;
}

.article {
  flex: 0 0 50%;
  max-width: 50%;
}
<div class="site-content">
  <aside class="left-sidebar"> </aside>
  <main class="main-section">
    <div class="article-wrapper">
      <div class="article"></div>
      <div class="article"></div>
    </div>
    <section class="infeed-desktop-ad">
      <div class="textwidget">
        ADSENSE INFEED AD CODE
      </div>
    </section>
  </main>
  <aside class="right-sidebar">
    <div class="widget-area">
      <section>
        <div class="widget">
          ADSENSE Repsonseive AD CODE
        </div>
      </section>
    </div>
  </aside>
</div>

I checked the width of .main-section without infeed ad it is around 1130px, but with infeed ad inserted it is around 1200px. The problem is infeed ad should have inherited the width of 1130px but it is using 1200px. I can't specify a fixed width on the adsense ads as the website is using a fluid layout.

Upvotes: 3

Views: 1357

Answers (1)

PJH
PJH

Reputation: 51

I have just been tackling this exact problem, figured out a fix so thought I should share it. Simply move:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

just above:

</body>.

Upvotes: 3

Related Questions