Show an image ad banner only on mobile in Hueman

Hi mayurjango. A header ads sidebar is built-in with the theme v2.2.0. To activate:

Theme Options > Header > Header Ads ON; Save Changes
Widgets
– add a Text widget to the Header Ads sidebar
– add you code in the Text widget; Save

Your ad should now be visible in the header until the viewport reaches 1200px, at which time it is hidden by default to make space for the title/tagline or logo. To override the default action, add the following to your child theme or custom css:

/* default header ads to hidden */
#header-ads {
  display: none;
}

/* display header ads at the point when the right sidebar collapses on mobile devices */
@media only screen and (max-width: 1200px) {
  #header-ads {
    display: block !important;
  }
}

You can adjust the max-width up or down to suit your needs.

Hi bdbrown, I don’t want to display the ad banner in header. I just want to make it appear only on resolutions say below 800px (mobile & tablet).

I can then place it at a position of my choice. Please tell how this can be done (I guess via CSS). I’m doing same thing with adsense ads but have no idea how to do it for a particular image ad banner.

Can you tell me how to create a class for above code and then define appropriate css for it to make this possible.

The css class is created by adding it to a html element. To set it up manually you’ll need to modify the php files for whichever pages you want to display the ad. If you use a theme dynamic sidebar then, once it’s added to the page code, you can control the ad content in the widget. Otherwise you’d need to change the page code to change the ad. In either case you’d need to add something like this to the page php files code:

<div class="my-ad">
  your ad code here
</div>

or 

<div class="my-ad">
  <?php dynamic_sidebar('my-sidebar'); ?>
</div>

You would then use css to style and position it; as an example:

.my-ad {
  height: 100px;
  width: 200px;
}

You could use the css I posted above to hide/display the ad, replacing the #header-ads id with the .my-ad class (or whatever the class name is).

Hi bdbrown,

Firstly, for some reason the ad doesn’t appears when added using the “header ads” option in latest version of Hueman.

So, I added the dynamic widget php code in header.php and assigned “header-ads” class to it.

Then I added your code to custom css but header ad still appears on desktop resolution. How can I make it appear only on mobile/tablet resolution?

Test site: https://test.webtrickz.com/

Please help!

mayurjango – There is nothing in your header with a “header-ads” class; that’s why the css isn’t being applied. This is what’s in your header:

<!-- BEGIN Ad Box -->
<div id="text-11" class="widget widget_text">
  <div class="textwidget">
    <div align="center">
      <a href="https://clk.omgt5.com/?AID=743801&MID=661795&PID=13929&CID=4419615&CRID=88940&WID=56835" rel="nofollow"><img src="https://g-ecx.images-amazon.com/images/G/31/img13/mshop/sweep17/OnePlus-One_SWM-325x50._V334025666_.png"></a>
    </div>
  </div>
</div><!-- END Ad Box -->

If you change the css to use the existing div id, it should work:

/* default header ads to hidden */
#text-11 {
  display: none;
}

/* display header ads at the point when the right sidebar collapses on mobile devices */
@media only screen and (max-width: 1200px) {
  #text-11 {
    display: block !important;
  }
}

Woah.. that worked like a charm!

And to show an ad only on desktop, I changed it to min-width and that worked too.

Thanks a lot bdbrown. ??

You’re welcome. If you don’t need any further assistance here please mark the topic as resolved. Thanks.

This works for all widgets. ??