Need to put google adsense banner to fit on right site of image logo banner.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I want the google adsense to be displayed to the right of the logo banner in the black rectangle. If possible, I would like to have it display in that way not only on desktop but on mobile devices as well.

This is what I'm going for:
http://imgur.com/owVpea6

My style.css:
https://app.box.com/s/mshojqax43qewy5ep934fcho1043d68p

The site is http://vrpill.com
Site html : https://app.box.com/s/dgn4d7u6zfllxv3eshlkw6yuk0dswgki

awarded to dekkard
Tags
css
html5

Crowdsource coding tasks.

3 Solutions


I was in your shoes I would install this Wordpress plugin:
Plugin Link

It will automatically check the browser and display mobile ads, the plugin will also position the ad where you want, if this doesn't work then it can also be manually inserted.


Try this: https://app.box.com/s/9kin6aqgl3pejbk26ufkp52cbqkdtbeq

This is your page saved with styles (the main css file is bYxBDsMgDAQ_FOpEatX3OGBUJDAWhlT5fYFccujF0u7MegWKdBA_VyMlg9Yz.css).
Check it out to see the changes.

I used an example image as an ad and put it into the background of .site-header .title-area (there are differences for different screen sizes.)

Also, note that I moved the inline style

<style type="text/css">.site-header .title-area{background:url(http://pzvrp.vrpill.netdna-cdn.com/wp-content/uploads/2015/04/190x601.jpg?542172) no-repeat !important}</style> 

to the css file and did some other small fixes.

BTW, if you could disable CSS merging, minification and caching until this issue is resolved, this would be a great help.
dekkard almost 4 years ago
I just disabled the minify in w3 cache. Does that also take care of the css merging and caching? Or do I need to go somewhere else to do that? Trying it out right now.
jvarp83 almost 4 years ago
There are 3 different CSS files in that zip folder. Which one do I replace my css with?
jvarp83 almost 4 years ago
Should I also disable my CDN while the issue is worked on?
jvarp83 almost 4 years ago
That's much better, thanks. Here's the file: https://app.box.com/s/ybm530lt3w9e4ludvs8as2s200iph6ja. Replace your style.css that says Theme Name: eleven40 Pro Theme with it.
dekkard almost 4 years ago
Yes, and remove (or comment out) that inline style <style type="text/css">.site-header .title-area{background:url(http://pzvrp.vrpill.netdna-cdn.com/wp-content/uploads/2015/04/190x601.jpg?542172) no-repeat !important}</style> from your html.
dekkard almost 4 years ago
I don't think there is an html file as this is a wordpress site. I called last night and checked my ftp server and there is no html file that exists. Trying that css file now.
jvarp83 almost 4 years ago
Ah,right. Just search for this style (e.g. for the string 190x601.jpg) among your site files.
dekkard almost 4 years ago
It doesn't exist. It's an image that I deleted from my computer. I purged the varnish and that didn't do anything. I since have disabled the varnish and it still exists. I'm uploading the functions.php right now i'll have a link to it in a second. The new style sheet is in there but now I am not seeing any ads.
jvarp83 almost 4 years ago
It existed in my migration files. I just deleted it.
jvarp83 almost 4 years ago
The functions.php file https://app.box.com/s/sie2epk6hp3bq4afv3obk6gny8ax1cfp
jvarp83 almost 4 years ago
Ok, now that the cache is off, in the page source it's displayed as <!-- W3TC-include-js-head --><style type="text/css">.site-header .title-area { background: url(http://www.vrpill.com/wp-content/uploads/2015/04/190x601.jpg) no-repeat !important; }</style>. Maybe this can give any hint.
dekkard almost 4 years ago
Should I just make a new jpg file named that and put it back into the directory?
jvarp83 almost 4 years ago
I was thinking, as you're going with Nergal's solution and added the #google element, I'd better help you with that. The problem you're not seeing the ad might be that there's no width specified for the ad. Try it this way: <ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px" data-ad-client="ca-pub-8844585360434864" data-ad-slot="2385858036" data-ad-format="horizontal"></ins>
dekkard almost 4 years ago
I am going between testing out both solutions and regardless of who gets the bounty, I will tip the other generously. :) I tried putting the width and height like you posted and still not showing.
jvarp83 almost 4 years ago
Yes, you messed it up =) Here's what you got (note the quotes and equals signs): <ins data-adsbygoogle-status="done" class="adsbygoogle" style="display:inline-block" width:"468px";="" height:"60px";="" data-ad-client="ca-pub-8844585360434864" data-ad-slot="2385858036" data-ad-format="horizontal"></ins> And the right way is: <ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px" data-ad-client="ca-pub-8844585360434864" data-ad-slot="2385858036" data-ad-format="horizontal"></ins> Also, use the standard way to init ads: <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
dekkard almost 4 years ago
Also, as a general rule, open your browser's Developer tools and inspect the source of your page after you do changes on the server side. And another advice, check Developer tools Console for errors - it's your friend when something goes wrong.
dekkard almost 4 years ago
Bah I'm a complete klutz. You are awesome!! Thank you so much :)
jvarp83 almost 4 years ago
Wow, thanks! But it's not over yet =) Check this: http://pastie.org/10101944
dekkard almost 4 years ago
Perfect! I made those changes. I don't see any difference but I imagine it changed something on the backend. I am preparing another bounty in the next 30 minutes or so that has to do with my site on mobile having white space when you scroll to the right. Would this be a difficult problem to fix? I really appreciate all you help over these last few days.
jvarp83 almost 4 years ago
Sure, go on and we'll have a look into it.
dekkard almost 4 years ago

Some new line in the CSS.

.wrap {
    position: relative;
}
#google {
    position: absolute;
    top: 0;
    left: 89px;
    height: 89px;
    line-height: 89px; /* new line */
    overflow: hidden;
    max-width: 600px;
    min-width: 10px; /* new line */
}
@media only screen and (max-width: 960px) {
    #google {
        width: auto;
        right: 0;
    }
}

Edit your functions.php from line 22

function ad_adsense(){
    ?>
    <div id="google">
        <!-- adsense here -->
    </div>
    <?php
}
add_action('genesis_site_title', 'ad_adsense');

You can also try to add the function to genesis_header_right instead genesis_site_title.

(Little help for genesis visual hook: http://genesistutorials.com/visual-hook-guide/)

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8844585360434864" data-ad-slot="2385858036" data-ad-format="auto" data-adsbygoogle-status="done"></ins>

Edit the style tag of the adsense from style="display:block" to style="display:inline-block"

And try to edit this:

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

To this:

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

Or if not works, this:

window.setTimeout(function(){ (adsbygoogle = window.adsbygoogle || []).push({}); }, 200);
I placed that first part at the end of my css file. For the <div.... part I checked my header.php file from the main genesis theme and don't see any .wrap in there to place it inside of. The child theme I'm using is eleven40-pro. There is no header.php file in the the child theme as of now. I could create a header.php file in the child theme as I don't want to edit the header.php of the main theme. What is the full code I would put in header.php in that case? I don't really have a preference on the size of the ad, as long as it is an image only ad and it fits inside of that black bar. Smaller the better.
jvarp83 almost 4 years ago
What files do you have? Because you don't have to edit the header.php just the header tag inside your main html file.
Nergal almost 4 years ago
I am in Filezilla right now trying to find out where my main html file is. As soon as I find it I will edit the header and report back.
jvarp83 almost 4 years ago
I am using Wordpress so there is no html file. Just the php.
jvarp83 almost 4 years ago
What php files do you have in the theme folder?
Nergal almost 4 years ago
functions.php, home.php, and page_landing.php
jvarp83 almost 4 years ago
It's showing up now but under the black bar. See picture below: http://imgur.com/qw1x8w8
jvarp83 almost 4 years ago
Could you save your page as html? I have to check the parent element.
Nergal almost 4 years ago
Yes I will save it in 10 minutes when I get back home.
jvarp83 almost 4 years ago
Here is the page as html: https://app.box.com/s/drjkmokprglu2e5tq4cbw1nbc7nks7iu I'm not sure if that was what you meant. Also here is the page source: https://app.box.com/s/jxu0aoriaj1g4hv694h5lw1m6sgp8mxm Also, I reloaded the page and ads are coming in vertical covering the content. http://imgur.com/TltC1Wb
jvarp83 almost 4 years ago
It's 4 am here so I go to sleep. Good night.
Nergal almost 4 years ago
No worries left a tip. If no one comes up with a solution before tomorrow I look forward to your continued effort :)
jvarp83 almost 4 years ago
The new edit implemented has the ad to the right of my logo but pushes the navigation menu below. It also ended up blocking the tagline. See picture: http://imgur.com/yaCiHve I went to get breakfast and when I came back the ads weren't displaying anymore. I have no idea which height and left properties to adjust. I am guessing it would be for the navigation menu and the logo? I have attached the revised CSS file. https://app.box.com/s/1v4qtg7wfvllhpznhjwdwekfp39w968t On mobile the ad shows up under the title bar like before. But now ads are not showing at all.
jvarp83 almost 4 years ago
The ad is now showing in generally the right place on mobile but not showing on desktop displays. On the mobile, is there a way to vertically center it? It now looks like the following: http://imgur.com/wNFmhqr Also I need to get it working on desktop displays too :)
jvarp83 almost 4 years ago
I made all the changes and tried both of those scripts and ads do not show on any device. Attached updated css and php: https://app.box.com/s/skt1n2ktwuuxzyqy9q19wwq09nnva68n https://app.box.com/s/h0jmzfvmj8msd5bxd23hoczgbk2ck373
jvarp83 almost 4 years ago
View Timeline