Ash Durham on "[Plugin: Ad King Pro] Not Responsive"

Hi Pat (and everyone else reading this post),

The CSS posted above is NOT the solution to the problem for multiple reasons. Sorry Pat, but the CSS you have implemented can cause some serious problems for some people. Let me explain.

The CSS you have used here is targeting EVERY image on the page. It may work for you if the only image you have on your site is the adverts and it resides in the sidebar, and you want them to be the full width of the sidebar at all times. If you add an advert in the header and only want it to respond at widths of 480px and lower, or you add images to your blog posts, ALL of these images will go to the width of it closest set container. That may be the #primary div that is only 66% of the window dimension (again, depending on the theme your using), or in the case of some headers, would be the width of the window, which for most people, wont work.

This is why the plugin is unable to set "responsive" css automatically because it depends on the theme and the way you are wanting the advert to be displayed and respond.

I would recommend targeting your adverts specifically, for example:

#secondary .adkingprobanner img {
width: 100%;
height: auto;
margin: 0 auto;
}

or

#header_container .adkingprobanner img {
max-width: 480px;
width: 100%;
height: auto;
margin: 0 auto;
}

Most themes would run with gutters at responsive widths, say for example you didn't have your advert in a container that added that padding, you could do the following to match it:

#your-container .adkingprobanner img {
max-width: 480px;
width: 90%;
height: auto;
margin: 0 auto;
}

This will ensure that the advert never goes edge to edge and gives you a 5% margin on either side, no matter the window size.

You could then go down the path of using media queries which would again depend on the rules already set in your themes CSS.

I suggest targeting the container your advert is in due to the fact that you may be running multiple adverts on one page and require different CSS for each, to allow it to react correctly for the banner dimension and position.

So as you can now gather, there are many different ways people can use Ad King Pro and many ways that it would be required to respond, making it impossible for me to 'assume' what CSS is needed in the plugin to serve everyone and without affecting or changing anything else on the page.

I hope you now understand why the plugin is unable to handle the responsive nature of the advert for you and why the above CSS is not the best way to handle adverts responsively.