1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 Custom css to not show banner on mobile

Discussion in 'Styling and Customization Questions' started by gavpeds, Jun 5, 2014.

  1. gavpeds

    gavpeds Active Member

    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?
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. HenrikHansen

    HenrikHansen Well-Known Member

    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.
  4. gavpeds

    gavpeds Active Member

    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.
    Last edited: Jun 5, 2014
  5. gavpeds

    gavpeds Active Member

  6. HenrikHansen

    HenrikHansen Well-Known Member

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

    Tracy Perry Well-Known Member

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

    Screen Shot 2014-06-05 at 10.25.34 AM.png
  8. gavpeds

    gavpeds Active Member

    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.
  9. Tracy Perry

    Tracy Perry Well-Known Member

    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;
  10. gavpeds

    gavpeds Active Member

    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.
    New Picture (6).png New Picture (1).png New Picture.png

    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! ;)
  11. Tracy Perry

    Tracy Perry Well-Known Member

    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.

    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.
    Last edited: Jun 6, 2014
  12. Tracy Perry

    Tracy Perry Well-Known Member

    @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 {
    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.
  13. gavpeds

    gavpeds Active Member

    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.

Share This Page