CSS Media Queries & Advertisements

Question

I'm using Twitter's bootstrap (responsive) css in my application. I want to have banner ads in my sidebar but depending on which media query is active my sidebar will be a different width meaning that my banner ad will also need have a different width.

How would you suggest that I go about swapping out banner ads depending on the currently active media query? I know that I could use jQuery to watch for changes in the browser's widths and swap them out that way but is there an existing solution out there somewhere like a jQuery plugin?

Answer 1

This is essentially already built in to Twitter Bootstrap. Bootstrap has a few classes called .visible- and .hidden- which are used in conjunction with phone, tablet and desktop to show and hide items on different devices.

You would then simply include X different versions of your banner, for example:

<div class="ads">
    <img class="visible-phone" src="smallest.png"/>
    <img class="visible-tablet" src="medium.png"/>
    <img class="visible-desktop" src="large.png"/>
</div>

Of course, if you wanted to set custom css properties for the media queries then you can add your own ones. This is how Bootstrap does it:

@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
    display: block;
  }
  ...
  .visible-desktop {
    display: none;
  }