XF 2.0 HTML Mobile Only Widget?

[Vanjoe]

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.

<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>

 

[Arty]

That's invalid CSS. You need to use { and } after media

 

[Vanjoe]

Added { and } after media but it still doesn't work.

 

[Arty]

It looks like xf:css doesn't allow content inside it, so you can try using xf:head instead:

<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>

 

[Vanjoe]

That's not working either. I tried "@media (max-width: 950px)" too but it didn't work.

 

[Russ]

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

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

I believe you want min not max.

 

[Vanjoe]

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]

I just tried this in my extra.less:

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

And it's definitely hiding the widget:


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

 

[Vanjoe]

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:

@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):

<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]

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

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

 

[Russ]

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:

@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):

<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]

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

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

min-width*