XF 1.5 Conditional - Mobile version

[rosal]

Hi i use this to show banners in the header side the logo (ad_header) and works ok, without problems.

<xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>

<xen:set var="$banners.1">banner one</xen:set>
<xen:set var="$banners.2">banner two</xen:set>
<xen:set var="$banners.3">banner three</xen:set>

{xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}

But in the mobile version break the design so i need to know how to not show to the mobile version the banners, there is any conditional that can be implemented?

 

[Paul B]

Use a media query to hide the content (assuming it's not from an ad provider and against their ToS): https://xenforo.com/community/resources/responsive-design.2193/

 

[rosal]

Use a media query to hide the content (assuming it's not from an ad provider and against their ToS): https://xenforo.com/community/resources/responsive-design.2193/

No @Brogan its not from an ad provider its for an gif banner, can you give-me one example code?
I already read that but cant implemented

 

[Paul B]

There are several examples in the resource.

Use display:none in conjunction with the relevant media query, or a specific class to hide content below a certain viewport width.

 

[rosal]

.MyContent {
<xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>

<xen:set var="$banners.1">banner one</xen:set>
<xen:set var="$banners.2">banner two</xen:set>
<xen:set var="$banners.3">banner three</xen:set>

{xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}
}


<xen:if is="@enableResponsive">
   .MyContent {
   }
</xen:if>

This is right?

 

[EQnoble]

<div class="myBanners">banner one</div>

@media (max-width:640px){
    .myBanners {
       display: none;
    }
}

 

[rosal]

<div class="myBanners">banner one</div>

@media (max-width:640px){
    .myBanners {
       display: none;
    }
}

Give error, show html in the header like this: @media (max-width:640px){ .myBanners { display: none; } }

I have to put the 2 codes in the ad_header template?

 

[rosal]

I have done this to test and give error.

<xen:hook name="ad_header" />

<div class="myBanners">banner one</div>

<xen:if is="@enableResponsive">
   @media (max-width:640px){
    .myBanners {
       display: none;
    }
}
</xen:if>

 

[EQnoble]

<div class="myBanners">banner one</div>

@media (max-width:640px){
    .myBanners {
       display: none;
    }
}

Give error, show html in the header like this: @media (max-width:640px){ .myBanners { display: none; } }

I have to put the 2 codes in the ad_header template?

No, the html I posted shows what you would do with your banner html (assuming in ad_header template since that is what you mention now) so you can target them with CSS, the actual CSS rules would be pasted in the EXTRA.css template.

 

[rosal]

Extra.css

@media (max-width:640px){
    .myBanners {
       display: none;
    }
}

ad_header

<div class="myBanners">banner one</div>

Works ok, but now how to use this code instead your banner one?
I use this code to random show 1 off 3 banners.

<xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>

<xen:set var="$banners.1">banner one</xen:set>
<xen:set var="$banners.2">banner two</xen:set>
<xen:set var="$banners.3">banner three</xen:set>

{xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}

 

[rosal]

Ok i get it, i put this way and all works.

<div class="myBanners">

<xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>

<xen:set var="$banners.1">banner one</xen:set>
<xen:set var="$banners.2">banner two</xen:set>
<xen:set var="$banners.3">banner three</xen:set>

{xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}

</div>

@EQnoble you are the man thanks for your help.

 

[rosal]

Any news about this working in in XF 2.1?