XF 1.3 Can't Make ad_header Responsive

Adam Tinsley

New member
I've got an AdSense banner ad to the right of my logo in the ad_header position. I've got it set to resize from leaderboard > banner > mobile banner. The trouble is when the screen gets small enough so that the divs break and the ad falls beneath the logo the header height doesn't adjust to accommodate the stacked divs. The main content is not pushed down and as you can see in the attachment, the arrows from the breadcrumb appear in the header. I've seen other posts on this, but I haven't seen a solution. Does anyone know a fix for this?

screen-shot.webp
 
Just in case you aren't aware, Adsense responsive does not respond in real time like a responsive image does, you need to refresh the page for the new size to show.

I use the Firefox developer responsive viewer, it shows the actual pixels size so can be quite useful.

I have also found that the Custom configured responsive Adsense is better a than the basic automatic version in terms of page load time. I also think the automatic responsive code is buggy, especially with xenforo.
 
Last edited:
Thanks for the help guys. I got it working with media queries targeting the #headerProxy and #logoBlock ids.

For anyone else having this problem the #headerProxy id is the one that pushes the content down so that it's below the navigation bar. The #logoBlock id adjusts the height of the logo/ad area and the position of the navigation bar. So in the image above, increasing the height attribute #headerProxy will push the breadcrumb and other content down below the navigation bar.
 
Back
Top Bottom