XF 1.3 Custom css to not show banner on mobile

[gavpeds]

I am using rotating ads plugin and want to be able to remove a big banner when people view the mobile version of the site as it breaks out the right side of the design.

I understand there is no xenforo conditional to do this but is it possible via css and if so what would the code be?

 

[Paul B]

Use a media query: http://xenforo.com/community/resources/responsive-design.2193/

 

[HenrikHansen]

The rotating ads plugin by xfrocks? If you use this plugin you can use the widget framework to have your rotating ads shown, and in the widget framework you can de-select for mobiles.

 

[gavpeds]

The rotating ads plugin by xfrocks? If you use this plugin you can use the widget framework to have your rotating ads shown, and in the widget framework you can de-select for mobiles.

Thanks i did try this but seems i can not show widget in header (above content) which is where this ad is. Widget shows in sidebar.

Might help if i try and explain what i am trying to achieve.

So in the position above content i have rotation ads showing one google ad and one 728x90 ad image.

They both rotate randomly on page load/refresh. What i want to do is not show the image ad in mobile as it breaks the style. The google ad i do want to show as it is the responsive ad code anyway.

 

[gavpeds]

Use a media query: http://xenforo.com/community/resources/responsive-design.2193/

I have had a try with this but not really sure have to get the correct code to make this work

 

[HenrikHansen]

Thanks i did try this but seems i can not show widget in header (above content) which is where this ad is. Widget shows in sidebar.

You can show widgets everywhere (all hook locations), including header.

 

[TPerry]

Thanks i did try this but seems i can not show widget in header (above content) which is where this ad is. Widget shows in sidebar.

Just a quick image where they can be shown at (this is just a snap of the top of the forum).

 

[gavpeds]

Thanks i appreciate that but the problem is this would work it i wanted to remove both the image banner and adsense. I want to be able to both rotating but on mobile remove just the image banner.

Using this method it removes both and no matter what i have tried so far i can not get it to remove only the image banner hence why i wandered what the code was to remove with media queries.

 

[TPerry]

They both rotate randomly on page load/refresh. What i want to do is not show the image ad in mobile as it breaks the style. The google ad i do want to show as it is the responsive ad code anyway.

OK... I just caught this one... and I don't think you are going to do this. How exactly are you displaying rotating ads (between Adsense and a image banner) in the template currently?

The code is given in @Brogans example where you just place the appropriate in each segment - but without seeing exactly how you are calling the ads it's going to be hard to tell you what to do. The "blue" color is where the mobile only ad would go (I assume adsense) and the other two would contain whatever you do now.

<xen:if is="@enableResponsive">
    @media (max-width:800px) {
        .MyContent {
        color: red;
        }
    }

    @media (max-width:610px) {
        .MyContent {
        color: green;
        }
    }

    @media (max-width:480px) {
        .MyContent {
        color: blue;
        }
    }
</xen:if>

 

[gavpeds]

Ok so currently i am using the rotating ads add on.

I have one position (above content) with two ads. This is done in the rotating ads ad on. Each ad i add the code so for the adsense one i add the adsense code and for the image banner one i add the image code with link.

Because they are both in the same position they rotate on page refresh/load. Please see pics.


As mentioned what i want to acheive is not to have the image ad shown on mobile as breaks the theme but i do still want the adsense one to show as i would loose revenue and it is responsive ad code anyway.

Hope that makes sense!

 

[TPerry]

That's going to be something in that add-on template. If it is using custom templates for that then the same theory will apply. If this is [BD] Rotating Ads, then your query would be better addressed (and more likely to be answered) in the associated discussion area for the add-on since not everybody uses it.

EDIT:
I bring your attention to this post. Very first quote and answer.

EDIT 2:
Looking at it... you can probably use some CSS to do it (background-size:contain) or something similar. Just have to give it a class to work with in EXTRA.css.

 

[TPerry]

@cyberpedz, what I do in my adsense (so I can do some styling on it if I need it like moving/centering/etc) ads is give it a <p id => like this

<p id ="adsense_ad_guest">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Then I can manipulate it in my EXTRA.css like this

#adsense_ad_guest {
padding-top:8px;
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
max-width: 1200px;
}

You could probably use (in EXTRA.css) a display:none?
But if you do that, 1/2 the time no ad will show probably.

The other option is to edit whatever template he is using with the media queries.

 

[gavpeds]

Thanks for all the help. It seems that what i want might not be possible then. I did post in the resource thread but as per your link no result.

Thanks anyway.