Need help with my Adsense placing Shortcode for mobile devices

  • I could use some help, please, in getting my responsive Adsense-placement shortcode right. I have a shortcode I’ve created that places a right-justified ad (float:right) into a wordpress page. I place the shortcode into the page wherever I want it, like this:

    [ad1]

    It works great on the desktop, with the text flowing around it on the left. However, mobile is presenting problems to me. I would like this same shortcode to sense when it’s mobile and then instead center the ad in the page, with NO text wrapping around it. I’m stuck on how to do this.

    Here’s my shortcode, which I know is embarrassingly screwed up, but I thought I’d just show it as it is:

    
function insert_ad1() {
	return '<div style="float:right;">  
<style>
.lg-rect-in-page-ad1 { width: 300px; height: 250px; text-align:center; }
@media(min-width: 600px) { .lg-rect-in-page-ad1 { width: 300px; height: 250px; padding-left:0; margin-left:15px; margin-right:10px; } }
@media(min-width: 850px) { .lg-rect-in-page-ad1 { width: 336px; height: 280px; padding-left:0; margin-left:15px; margin-right:10px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Lg Rect in page AD1 -->
<ins class="adsbygoogle lg-rect-in-page-ad1"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxx"
     data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>';
}
add_shortcode( 'ad1', 'insert_ad1' );

    Can any of you PHP/CSS experts help me out with how to do this?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Can you link your website please and I’ll take a look, you should be able to use media queries to alter its alignment at mobile widths.

    Thread Starter slobizman

    (@slobizman)

    Thanks for the reply. I did end up getting it right. Here’s the code,and it’s working flawlessly (knock on wood):

    
function insert_ad1()  {
	return '<style>
@media (max-width: 800px) { .floating {float:none; text-align:center;} }
@media (min-width: 801px) { .floating {float:right; width: 336px; height: 280px; padding-left:0; margin-left:15px; margin-right:10px;} }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- CI responsive -->
<ins class="adsbygoogle floating"
     style="display:block"
     data-ad-client="ca-pub-****************"
     data-ad-slot="***********"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
}
add_shortcode( 'ad1', 'insert_ad1' );
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Need help with my Adsense placing Shortcode for mobile devices’ is closed to new replies.

Tags