XF 1.3 Can't Make ad_header Responsive

[Adam Tinsley]

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?

 

[Mr Lucky]

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.

 

[Paul B]

You will need to use media queries to change the CSS associated with the header elements to change them to match the ad block.

 

[Adam Tinsley]

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.