Making AdRotate WordPress Plugin mobile responsive

To make the adrotate ad blocks mobile responsive.

Edit the adrotate/adrotate-output.php file to add some class and id  selectors to the <div> that the plugin creates when it makes the blocks. Then we can style each <div> to make them responsive.

$output .='<div id="adrote_advblock'.$block_id.'" class="adrote_advblock" style="'.$gridfloat.'margin:0;padding:'.$block->gridpadding.'px;clear:none;width:'.$gridwidth.';height:'.$gridheight.';border:'.$block->gridborder.';">';
					for($i=0;$i<$block_count;$i++) {
						$banner_id = adrotate_pick_weight($selected);

						$output .='<div class="adrote_advadvert" style="margin:'.$block->admargin.'px;padding:'.$block->adpadding.'px;clear:none;float:left;width:'.$adwidth.';height:'.$adheight.';border:'.$block->adborder.';">';
						if($block->wrapper_before != '') { $output .= stripslashes(html_entity_decode($block->wrapper_before, ENT_QUOTES)); }
						$output .= adrotate_ad($banner_id, false, 0, $block_id);
						if($block->wrapper_after != '') { $output .= stripslashes(html_entity_decode($block->wrapper_after, ENT_QUOTES)); }
						$output .= '</div>';

This create a class called  adrote_advblock

and so then you style all the blocks of adverts  to float in the middle. This you add to your theme’s stylesheet

/* Ad rotate Styling
------------------------------------------------------------ */
.adrote_advblock {

margin-left:auto !important;
margin-right:auto !important;}

If your adverts are more than 240 wide which would be the case if you are using 125px blocks, then the block is too wide for the smallest mobile responsive themes. Or if you sidebar is wider than 320px, the width of the iphone you will need to add some more styling to reduce these images so they look great
That is were the id come in, the plugin above a div with a unique idea for each block was created because how you make a 125px by 125 px block is going to be different to a full width image
So in the below the block ID1 is full width images and the block ID 2 is 125px by 125px. I have chosen to resize them the images so I still get a grid. I remove the border and then add it again around each image in the block :

@media only screen and (max-width: 260px){
/* 125px block Ad rotate Styling for the smallest screens
------------------------------------------------------------ */
#adrote_advblock2 img {
width:80%;
margin-left:10%;
margin-right:10%;
border: 2px dashed #e3e7d0;
}
#adrote_advblock2 .adrote_advadvert {border:none !important;}

/* 256px full width of sidebar Ad rotate Styling for the smallest screens
------------------------------------------------------------ */
#adrote_advblock1 img {
width:80%;
margin-left:5%;
margin-right:5%;
border: 2px dashed #e3e7d0;
}

#adrote_advblock3 .adrote_advadvert {border:none !important;}

You can see it on my clients website ( still a work in progress) Everywhere You Go