How to change the float of an adsense ad depending, upon device

[slobizman]

I hope this is the right forum for a coding question regarding positioning a responsive Adsense ad.

On a Wordpress site, I have functions I have written that create shortcodes that allow me to place Adsense ads where I want within the content of a page or post. For example, to insert a float:right ad I would enter [ad1r] into the content.

My problem is that these look great on a desktop or tablet, but as the width reduces on a phone, the wrapping text on the ad's left gets very skinny. What I need is to be able to write the @media queries in such a way so that on mobile devices it changes the float:right to float:none, so the ad is centered with no text wrapping.

I've been wracking my brains on this for hours today with no luck. Does anyone know how to do this?

The ad floating right is a large triangle. On mobile, I'd like it to be a 300x250 centered.

[slobizman]

I think I found a good solution! Here's what I've got, and it seems to work very well.

function insert_ad9b() {
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-9429475561103972"
  data-ad-slot="5558656139"
  data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
}
add_shortcode( 'ad9b', 'insert_ad9b' );