[Plugin: AdRotate] Adrotate and Responsive Design

From my understanding so far, with the decision to add fixed widths to the add in a recent update, this is now making it difficult to make banner ad ‘images’ (as opposed to the HTML5 option above) responsive using the max-width:100%; css rule.

I might be wrong by the way, still getting my head around this ??

Fixed width changes nothing about making ad images and if anything makes it easier because you stake out an area for the image now.

This has no influence on responsive themes which prefer preset boxes, such as AdRotate blocks now makes.

However, this change in AdRotate wasn’t to support responsive themes better. But it’s a welcome ‘side effect’.

Hi again Arnan – another question. What if I don’t want ads to be fixed in size, but change in size depending on the screen resolution/device? The problem with fixed width ads is that when a sidebar (which is styled in percentages to allow for flexibility) the ad doesn’t resize to the width of the sidebar.

I can’t figure out how to ensure that the image inside the container responds to the img {max-width:100%} rule.

Thanks.

It looks as though images resize for single ads using the Single Ad and Group of Ads widget options, but not using the Block of Ads option.

Images do not resize with resolution either. So even if AdRotate allowed for a flexible width. The image still remains the same size at all times. 100px is 100px.

Maybe I’m missing something?

That’s right. If I were to determine the image as 100px wide it would remain the ‘fixed’ width of 100px.

However, with responsive design, as well as fixed width images, we can set it so that an image is always 100% the width of it containing element.

This is a useful article on how to build a responsive website, but particularly relevant to this discussion, the part on flexible images.

In relation to Ad Blocks, it would be helpful if, as an option, images could become flexible (as they are as Single Ads or Ad Groups) so that there is no chance of either excessive white space or clipping occurring.

I’ve created a little demonstration of what I mean regards the differences between Single, Group and Block. As you can see when you resize the width of the browser, the Single and Group Ads resize to the breaking point, and then revert to their original size. The Block Ads however don’t because we’ve identified a fixed pixel width of the default 125px or, in the case on the demo, 180px.

I’m wondering if there was an option to be able to add a percentage instead of a pixel measurement whether or not this would achieve the desired result of flexibility?

Thanks.

It CSS handles image scaling, and it seems it does, this certainly is an interesting option to add. If not for responsiveness. It will make things easier for the end user.

Perhaps we can have a chat about this sometime so we can share our views on this.

That’s fine – look forward to speaking soon.

Gavin, You can reach me at [email protected] – I didn’t see a way to contact you on your profile.

Hi Arnan – I’ve just emailed you so look forward to speaking soon. All the best.

AdRotate WordPress Plugin making mobile responsive I wrote a post about how I made the advert blocks mobile responsive in the sidebar.

Any news on this … responsive widgets and blocks ?? I would certainly need it for my website. Thanks guys !!

Ditto on @remstoffer’s comment.

Another nice option in AdRotate would be to allow for a different ad image to display at certain break points. For example, a wide horizontal banner ad of say 750px on a small screen is going to shrink and the content in the image will be barely visible…..it would be awesome to be able to upload a second image for a banner ad that would be displayed at certain break points, that way the ad could be something like 450 x 350 when the screen size is smaller…and from there down it could just shrink with the container if the screen size is any smaller than 450px.

Right now, I’m probably going to try and write a javascript action to replace the banner image when the screen gets smaller.

Have any of the suggestions above for adding responsive capabilities been added to the Ad Rotate plugin? I am surprised so many of the advertisement solutions are this far behind the curve.