Help with "bobble" on page when using 970x250 for Ad

[gsk8]

Hey all!

Any ideas for CSS or anything I can do to prevent the page from "bobbing" when the ad loads? It was ok with the 720x90, but folks are not liking the 970x250 much.

Please see the forum at goldenskate.com. Thanks!

This is what I have in vbulletin-chrome.css

#ad_global_below_navbar {
width:100%;
padding:{vb:stylevar ad_padding};
margin:{vb:stylevar ad_margin};
}

[Wayne Luke]

I don't see the ad on that site. Basically, you need to layout the space for the ad before loading it on the page. So if your ad is 970 x 250, you need to make sure that a 970 X 250 block is painted out to hold it while the basic page is being drawn. Your code can come back later after page load and actually draw the ad within that block.

[gsk8]

Hi Wayne! I took it down until I could figure out how to "paint out the block". Any suggestions?

[Wayne Luke]

Create a DIV with the dimensions you need. Something like:

<div class="large_ad">code here</div>

.large_ad {
  display: block
  width: 970px;
  height: 250px;
 margin: auto;
}

You're using XHTML 1 so make sure to close all your tags properly.

[gsk8]

Thanks Wayne! I'll give it a shot!

BTW, I can't seem to get any of the mobile ads to work. The Ad Manager is working for the leaderboard, footer, first and last post in a thread, but won't do anything for the mobile templates. Can you direct me to any thread that has the fix to this?

Thanks!

[Wayne Luke]

As far as I am aware, there are no ad locations in the Mobile Template for vBulletin 4. You'll need to manually edit each template where you want your Ad to appear.

The vBulletin 4 Mobile Style is pretty basic and doesn't provide all the experience of the main styles. This is one of the issues why we abandoned the concept of Mobile Templates in vBulletin 5. Instead vBulletin 5, uses styles that adjust to any screen size automatically.

[gsk8]

Create a DIV with the dimensions you need. Something like:

<div class="large_ad">code here</div>

.large_ad {
display: block
width: 970px;
height: 250px;
margin: auto;
}

You're using XHTML 1 so make sure to close all your tags properly.

Thanks Wayne. This was helpful and seems to be working!

[gsk8]

This is one of the issues why we abandoned the concept of Mobile Templates in vBulletin 5. Instead vBulletin 5, uses styles that adjust to any screen size automatically.

Does this include ads? What if the ads are leaderboard in default? What happens when someone access on phone (for VB5)?

[Wayne Luke]

The phone should resize images to fit within the space allowed. However, you can also use CSS and Site Builder Module options to show different images at different resolutions.

Your advertising provider may be able to provide Responsive code as well.