• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Responsive ads for magazine pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive ads for magazine pro

This topic is: not resolved

Tagged: ads, monetize, responsive

  • This topic has 5 replies, 3 voices, and was last updated 7 years, 11 months ago by tonymayo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 24, 2013 at 1:01 pm #75386
    Ritesh Verma
    Member

    Hey guys,

    I am looking for something that can turn my ads into responsive ads. Just like google adsense provide. Example if width >=728Px then show leaderboard if >=468px then show banner if >=300Px then show a large rectangle.

    i know it should be like

    check view port width and then

    width >=728px
    paste ad iframe code here
    width >=468Px
    paste ad iframe code here
    width >=200Px
    show no ad

    i am looking forward, if someone could help me with this, since using unmatched ad size creates no sense in a responsive theme

    http://studypep.com/
    November 24, 2013 at 1:39 pm #75391
    nutsandbolts
    Member

    This tutorial should answer many of your questions: http://www.labnol.org/internet/google-adsense-responsive-design/


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 24, 2013 at 1:54 pm #75393
    Ritesh Verma
    Member

    Dear, i have already mentioned "like google provide" Amit sir, have written that tutorial strictly for adsense. I uses it with adsense but about making other ad tags responsive too.

    All blogs doesnot use adsense or just adsense. We should make other tags responsive as well.

    Thanks

    November 24, 2013 at 2:00 pm #75394
    nutsandbolts
    Member

    No need to be condescending, especially when you're essentially asking others to Google the answer for you.

    If you're using an image banner, assign it a div class and give it a max-width of 100% or background-size: contain. Otherwise, without specific examples of the ad type, it's difficult to tell you how to make your ads responsive. Adsense was the lone example you gave, which is why I directed you to a tutorial for Adsense.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 24, 2013 at 2:16 pm #75396
    Ritesh Verma
    Member
    This reply has been marked as private.
    March 4, 2015 at 6:55 am #143161
    tonymayo
    Member

    Hi,
    I would like to add Responsive Adsense to my blog ( Magazine Pro theme) in the following slots:

    Header Right

    Primary Sidebar

    After Post Content

    Do I add code below (from http://www.labnol.org/internet/google-adsense-responsive-design ) to my Theme CSS file and if so where should I add code.

    <div id="google-ads-1"></div>

    <script type="text/javascript">

    /* Calculate the width of available ad space */
    ad = document.getElementById('google-ads-1');

    if (ad.getBoundingClientRect().width) {
    adWidth = ad.getBoundingClientRect().width; // for modern browsers
    } else {
    adWidth = ad.offsetWidth; // for old IE
    }

    /* Replace ca-pub-XXX with your AdSense Publisher ID */
    google_ad_client = "ca-pub-XXX";

    /* Replace 1234567890 with the AdSense Ad Slot ID */
    google_ad_slot = "1234567890";

    /* Do not change anything after this line */
    if ( adWidth >= 728 )
    google_ad_size = ["728", "90"]; /* Leaderboard 728x90 */
    else if ( adWidth >= 468 )
    google_ad_size = ["468", "60"]; /* Banner (468 x 60) */
    else if ( adWidth >= 336 )
    google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
    else if ( adWidth >= 300 )
    google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
    else if ( adWidth >= 250 )
    google_ad_size = ["250", "250"]; /* Square (250 x 250) */
    else if ( adWidth >= 200 )
    google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
    else if ( adWidth >= 180 )
    google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
    else
    google_ad_size = ["125", "125"]; /* Button (125 x 125) */

    document.write (
    '<ins class="adsbygoogle" style="display:inline-block;width:'
    + google_ad_size[0] + 'px;height:'
    + google_ad_size[1] + 'px" data-ad-client="'
    + google_ad_client + '" data-ad-slot="'
    + google_ad_slot + '"></ins>'
    );

    (adsbygoogle = window.adsbygoogle || []).push({});

    </script>

    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
    </script>

    Thanks in advance.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble