Responsive banners

  • Resolved HenryAhokas

    (@henryahokas)


    8 years, 10 months ago

    Hi,

    I need to place two different banners via javascript above the header and main navigation, mobile and normal versions. Tried it out by placing the script in the header.php directly with an if statement for screen resolution.

    This might work but difficult to say now as the ads are not yet active for the site. But I wanted to ask if there is another method? Is it possible to use css @media to select which script/banner the page displays?

    Thanks!

Viewing 1 replies (of 1 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hi Henry,

    Thanks for choosing Apex!

    For something like this, you’ll want to use a “child theme“. You can click here to download a starter child theme for Apex.

    The trouble with directly editing the header.php file in Apex is that you will lose these modifications when you update the Apex theme. A child theme keeps your changes protected.

    You’ll want to copy the header.php file from Apex into your Apex child theme, and then the child theme’s version will be loaded instead. Then, include the markup/javascript for the ads where you want them displayed in the header.

    Lastly, you can control the mobile/desktop display entirely with CSS like this:

    .desktop-ad {
  display: none;
}
@media all and (min-width: 600px) {

  .desktop-ad {
    display: block;
  }
  .mobile-ad {
    display: none;
  }
}

    I made up these class names as examples, but you can use this code as a starting point. This code would hide the desktop ad by default while the mobile ad is allowed to display. A media query is then applied to tell the browser when the screen is 600px or wider to hide the mobile ad and display the desktop ad instead.

    I hope that helps, and let me know if you have any further questions.

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive banners’ is closed to new replies.