XF 2.0 HTML Mobile Only Widget?

Vanjoe

Member
I'm trying to add a HTML widget that's only displayed on mobile. I tried setting @media (max-width: @xf-responsiveWide) and @media (max-width: @xf-responsiveMedium) to {display: none;} in the widget template under <xf:css></xf:css>, but I must be doing something wrong because I still see the widget regardless of width.

Advanced mode is off.

HTML:
<p>Hello mobile user.</p>
<xf:css>
@media (max-width: @xf-responsiveWide) {.block[data-widget-id="30"] {display: none;}}
@media (max-width: @xf-responsiveMedium) {.block[data-widget-id="30"] {display: none;}}
</xf:css>
 
Last edited:

Arty

Well-known member
It looks like xf:css doesn't allow content inside it, so you can try using xf:head instead:
Code:
<xf:head option="widget30Style">
<style>
@media (max-width: @xf-responsiveWide) {.block[data-widget-id="30"] {display: none;}}
@media (max-width: @xf-responsiveMedium) {.block[data-widget-id="30"] {display: none;}}
</style>
</xf:head>
 

Russ

Well-known member
Your current CSS is hiding it at those points, if you want it only on mobile you may want to switch that around,

Code:
@media (min-width: @xf-responsiveWide) {.block[data-widget-id="30"] {display: none;}}

I believe you want min not max.
 

Vanjoe

Member
That doesn't seem to work either. I tried adding it to extra.less as well but it is still displayed. In the widget itself I tried using min-width under xf:css or as a style under xf:head as @Arty pointed out. Tried it with advanced mode on and off.
 

Russ

Well-known member
I just tried this in my extra.less:

Code:
@media (min-width: @xf-responsiveWide) {.block[data-widget-id="7"] {display: none;}}

And it's definitely hiding the widget:
193117

If you want to post a link so we can inspect, may be able to help a little further.
 

Vanjoe

Member
Is that an HTML widget? Did you have to manually add the "data-widget-id" in the div? All my widgets do have a data-widget-id in the div code but the HTML widget is set to "<div class="block">".

It's working now using:
extra.less add:
CSS:
@media (min-width: @xf-responsiveMedium) {.block[data-widget-id="30"] {display: none;}}
@media (min-width: @xf-responsiveWide) {.block[data-widget-id="30"] {display: none;}}


Widget (Advanced Mode: ON):
PHP:
<div class="block" data-widget-id="30">
    <div class="block-container">
        <h3 class="block-minorHeader">Mobile Only</h3>
        <div class="block-body block-row">
            <p>Hello mobile user.</p>
        </div>
    </div>
</div>

Replace the id with your widget id.

Thanks @Russ @Arty .
 

Arty

Well-known member
Oh right, that css would work perfectly in extra.less, but won't work in html templates because syntax for properties is different.

Code:
<xf:head option="widget30Style">
<style>
@media (max-width: {{ property('responsiveWide') }}) {.block[data-widget-id="30"] {display: none;}}
</style>
</xf:head>
 

Russ

Well-known member
Is that an HTML widget? Did you have to manually add the "data-widget-id" in the div? All my widgets do have a data-widget-id in the div code but the HTML widget is set to "<div class="block">".

It's working now using:
extra.less add:
CSS:
@media (min-width: @xf-responsiveMedium) {.block[data-widget-id="30"] {display: none;}}
@media (min-width: @xf-responsiveWide) {.block[data-widget-id="30"] {display: none;}}


Widget (Advanced Mode: ON):
PHP:
<div class="block" data-widget-id="30">
    <div class="block-container">
        <h3 class="block-minorHeader">Mobile Only</h3>
        <div class="block-body block-row">
            <p>Hello mobile user.</p>
        </div>
    </div>
</div>

Replace the id with your widget id.

Thanks @Russ @Arty .


I have a suggestion out for it: https://xenforo.com/community/threads/html-widget-widget_data-widget.141784/
 

Vanjoe

Member
Oh right, that css would work perfectly in extra.less, but won't work in html templates because syntax for properties is different.

Code:
<xf:head option="widget30Style">
<style>
@media (max-width: {{ property('responsiveWide') }}) {.block[data-widget-id="30"] {display: none;}}
</style>
</xf:head>

min-width*
 
Top