XF 1.4 How to prevent responsive ad unit from "bumping" page content?

[kontrabass]

I have a top leaderboard DFP banner that is responsive depending on screen size (728x90, 468x60, or 320x50). What I'm noticing is that when the page renders, it first renders with no space given to the leaderboard. Then a split-second later (or longer if on a slow mobile), the content of the page "jumps" down to make room for the ad. This is annoying to me and our visitors.

Do I need to assign a specific size to the <div> holding the ad? The <div> would have to be different height depending on the screen size...? Is there a recommended way of doing this? Conditionals in the ad_below_content template?

Thanks!

 

[Paul B]

You can use media queries to set the div height based on the browser width.

See the guide here: https://xenforo.com/community/resources/responsive-design.2193/

 

[kontrabass]

Ahh, ok. Easy enough