WordPress.org

Ready to get started?Download WordPress

Forums

Mobile Theme Ads for Jetpack
[resolved] ads wider than 300pixels cut off on right side (9 posts)

  1. rick1971
    Member
    Posted 7 months ago #

    I've been working on trying to get a mobile theme working with google adsense and I'm having a tough time with ads 300 pixels wide or larger.  I've tried the plug-in with jetpack mobile theme and I've modified the code for my purposes, but even before modified, if I tried the 320x50 size google ads or 300x250, the right side of the ads were cut off, even when I viewed the site with my phone in landscape where the width was well beyond 320 pixels.  If I tried using the responsive ad code, all of the ads were cut off at about 300 pixels wide.

    I don't know if this is an issue caused by the jetpack mobile theme or the way the plugin places the ads into the code.

    Site: babysideburns.com

    If visiting from a mobile phone I have narrow ads which work above and below the content but I left a 320x100 ad above the comments which is cut off on the right to illustrate the problem I'm having.

    http://wordpress.org/plugins/jetpack-mobile-theme-ads/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    I wasn't able to reproduce the problem on my own site. Could you try to deactivate the ShareThis plugin that is also added to the Mobile Theme, just to make it doesn't include CSS that may apply to the ad containers as well?

    Thanks!

  3. rick1971
    Member
    Posted 6 months ago #

    Strange.

    I'm not using the sharethis plugin. I hard coded it into the theme and added it to the ad code plugin for the mobile theme.

    There are no changes to CSS as part of the share this code changes.

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    ShareThis does include CSS and JS files that may affect the look of the ads. The following libraries are loaded in the Mobile Theme:

    script type="text/javascript" src="http://wd-edge.sharethis.com/button/getAppDefault.esi?cb=stLight.allDefault&app=all&publisher=b9391100-605d-4655-8c14-b4cfa2781969&domain=babysideburns.com"></script><script type="text/javascript" src="http://wd-edge.sharethis.com/button/checkOAuth.esi"></script><link rel="stylesheet" type="text/css" href="http://w.sharethis.com/button/css/buttons.b53d53949b67e7ea0adacde4c2838c6a.css"><script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script><script type="text/javascript" src="http://wd.sharethis.com/api/getCount2.php?cb=stButtons.processCB&refDomain=babysideburns.com&refQuery=&pgurl=http%3A%2F%2Fbabysideburns.com%2F2013%2F12%2Flove-is%2F&pubKey=b9391100-605d-4655-8c14-b4cfa2781969&url=http%3A%2F%2Fbabysideburns.com%2F2013%2F12%2Flove-is%2F%23sthash.m2bbLPwT"></script>

    There are also quite a lot of inline styles.

    Could you try to remove these changes and let me know if it helps?

  5. rick1971
    Member
    Posted 6 months ago #

    I've removed the sharethis code from the minieleven theme header and my plugin and I still have the same issue.

    I'll leave the sharethis code off the mobile theme for the time being, so hopefully you can see.

  6. rick1971
    Member
    Posted 6 months ago #

    I was able to replicate it on another website, on a different server. If I use a 320x50 mobile banner ad, it is cut off on the right side.

    If you are not using the asynchronous code, you may not notice that the right edge is cut off.

  7. rick1971
    Member
    Posted 6 months ago #

    I had to replace the sharing code and go with a narrower ad on the live site. I've created a test site where you can still see the problem, with the sharethis code not installed:

    http://9c5.82d.myftpupload.com/hello-world/

    I also noticed another minor issue - when you click on the "View Full Site" link it loads the mobile ads on the desktop theme. This can be a problem with adsense as they limit you to 3 ads per page. I know most people don't "view desktop" on a mobile phone, but it would be nice to fix this as well.

    Thanks for your help!

  8. rick1971
    Member
    Posted 6 months ago #

    I don't know much about css, but I playing around with the style.css in the minilevel theme folder I managed to get the ads to render properly when I changed:

    /* Make sure embeds and iframes scale on smaller screens */
    embed,
    iframe,
    object {
    	width: auto;
    }

    to

    /* Make sure embeds and iframes scale on smaller screens */
    embed,
    iframe,
    object {
    	width: 100%;
    }

    I'm not sure why the auto causes problems here, or if I am creating other problems by going with 100% instead of auto.

    I don't like messing with parent themes, so I'm wondering if there is a way to set this in the jetpack styles.css file, but make it only apply to the mobile theme and not the primary theme.

  9. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    Nice catch!

    You could overwrite the Mobile Theme CSS by adding the following to your Custom CSS editor, while enabling the Mobile Compatible mode:

    .mobile-theme embed,
    .mobile-theme iframe,
    .mobile-theme object {
    	width: 100%;
    }

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.