XF 2.2 Trying to hide a HTML widget under a certain page width

[Nicolas FR]

Hello,

This is what i wrote in extra.less template:

@media (max-width: @xf-responsiveWide) {
    [data-widget-id="25"] {
        display: none;
    }
}

Where 25 is the Widget ID i created.
But it doesn't works...
I try to replace [data-widget-id="25"] by [data-widget-key="quick_options"] but still not works.

Where is my mistake ?
Thanks

 

[Paul B]

Is it an HTML widget?

data-widget-id isn't expose for those - check the page source code.

 

[Nicolas FR]

Yes it's a HTML widget, i create it in ACP > Widgets
How can i call him in extra.less ?

 

[Paul B]

There is no way of targeting it in CSS - there is no unique class or ID.

You will need an alternative approach such as this - ensure you check the Advanced mode option.

@media (max-width: @xf-responsiveWide) {
    .myWidget {
        display: none;
    }
}

 

[Nicolas FR]

Yeah !
Thanks, it works fine like that