Vasilis

Floater over the content

10 posts in this topic

Hello

I am using BT Floater for google ads in my website (http://www.pokaholic.gr/list/56-makaroni). My problem is that for different screen resolutions, the banners are possitioned in different places, and sometimes over the content.

In order to avoid that (attached photo before_on_1920x1080) I am using, for example for the left banner, the parameters LEFT and x=1500 and for the right banner, RIGHT and x=1500. That way I can avoid the banners being over the content on all resolutions by being far left or far right.

But now, for example in 1024x768 (attached photo after_on_1024x768) , no one can see my ads becasue there are shown in the deep far sides.

I would like something that works on all resolutions. Is there a better solution on this?

Thank you in advance

post-150940-0-18359300-1360157456_thumb.

post-150940-0-24566900-1360157505_thumb.

Share this post


Link to post
Share on other sites

Dear BT Team,

I have a similar problem with beachmania.ch

I've set the parameters to

x: 20

Y: 20

That works great with a standard screen. But if I visit the page on a mobile device or with a smaller screen, the floater is above the content.

Target: The floater should be behind the page or even not visible anymore in that case.

I've already tried to fix this with this JS code:

jQuery(document).ready(function(){

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

jQuery('#floater_content_right, #floater_content_left').hide();

}

});

But unfortunately it didn't work.

I've also tried to change the z-index, i've even completely deleted this line, but again, no success.

I would be very glad, if you could check www.beachmania.ch and give me another advice to solve that problem.

Thank you and best regards from Switzerland

Fabian

Share this post


Link to post
Share on other sites

So, please try to use CSS 3 with media query

@media (max-width:320px){

#floater_content_right,

#floater_content_left{

display: none !important;

}

}

Share this post


Link to post
Share on other sites

Thank you for your reply.

Unfortunately, none of that is working.

But if I do analyze the page with Google Chrome, I can there deactivate the z-Index and the module switches to the background. After several hours of testing, i still could not figure out where this parameter comes from. I've deleted it already in modules/mod_bt_floater/tmpl/css/floatingbanner.css.

z-index.jpg

Share this post


Link to post
Share on other sites

I could finally solve the problem. Here is the solution:

I copied the following code to my template CSS:

@media screen and (max-width: 1660px)

{

#floater_right,

#floater,

#floater_content_right,

#analytics{

display: none;

}

}

So there were two problems:

1) my website resizes on smaller screens, therefore i had to use @media screen and (max-width: 1660px) instead of @media (max-width:320px)

2) I had to put the floater module into a module position. i've chosen "analytics". Therefore, #floater_right, #floater and #floater_content_right hat no influence on the behaviour of the module. Therefore, i had to add #analytics to the code.

Finally, it works... thank you for your support and especially for this awesome module!

Best regards

Fabian

www.beachmania.ch (with the floater on the right)

Share this post


Link to post
Share on other sites

Hi Annie.

Let me reply it is possible on mobile but on very small screen only 640px, i think that floater image will became huge, so as you see, almost person want to hide it on small screen.

Do you have other idea?,

Please tell me.

Thanks

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now