CODEWITHSUNDEEP
htmlcssadsense
FlyingDonkey
FlyingDonkey

Reputation: 85

One or two ads depending on window width - is it possible?

I was hoping you could help me with this one, since I know little about HTML, CSS, etc. Essentially, me and my friends have a website ( https://www.mitologia.pt/ ), and we are using Adsense. At the bottom of the page we want to add a Matched Ad, together with a Display Ad, but for now one is after the other (which looks horrible). Instead, we wanted to do it like this:

Is it possible to do this? If so, how? Here's my current solution, which works perfectly for over 500px, but doesn't work at all for under it...

    <div style="margin-top: -12px; float: left; width: calc(100% - 300px);">
<!-- Recommendations -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="XXX"
     data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br />
 </div>
 <!-- THIS IS FOR THE AD ON THE RIGHT -->
 <div style="margin-top: -12px; float: right; width: 300px;">
 <!-- fim da página -->
<style type="text/css">
.adslot_1 { display:inline-block; width: 300px; height: 250px; }
@media (max-width:500px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 300px; height: 250px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="XXX"
   data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br />
 </div>

Upvotes: 0

Views: 97

Answers (2)

FlyingDonkey
FlyingDonkey

Reputation: 85

With the help of @Kida , I was able to finally fix this. Here is the final code, since it may help someone else in the future:

<div class='leftBottomAd' style="float: left;">
<style type="text/css">
    .leftBottomAd { width: calc(100% - 300px); }
    @media (max-width:800px){ .leftBottomAd { width: 100% !important;}}
</style>
<!-- Recommendations -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="XXX"
     data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>  </div>

<div style="float: right; width: 300px;">
 <!-- Bottom Ad -->
<style type="text/css">
.adslot_1 { display:inline-block; width: 300px; height: 250px; }
@media (max-width:800px) { .adslot_1 { display: none; } }
@media (min-width:800px) { .adslot_1 { width: 300px; height: 250px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="XXX"
   data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br/></div>

Upvotes: 1

Kida
Kida

Reputation: 840

Okay, so that's your inline styled div:

<div style="margin-top: -12px; float: left; width: calc(100% - 300px);">

My idea is to try this:

<div class='yourNameOfClass' style="margin-top: -12px; float: left;">
<style type="text/css">
    .yourNameOfClass
    {
       width: calc(100% - 300px);
    }
    @media (max-width:500px) 
    {
      .yourNameOfClass
      {
         width: /*wharever you wish here*/!important;
      }
    }
</style>

The problem is that I can't see any ads on your website, so I can't imagine problem accurately

Upvotes: 1

Related Questions