Is it possible to specifically target a widget without wrapping it in a div within a template?

Use case - I have several widgets on my homepage from other addons that I wish to either show or not show on mobile/desktops. I know I can achieve this easier if it's a HTML widget - but in regards to custom, I wouldn't know where to start.

I've asked on but haven't had much luck.


Pixel Exit Staff
For the most part, you can use CSS to target any widgets. The only widgets that don't have unique class names are HTML widgets (but there's an easy work around fo that).

For example, this CSS inside extra.less:

@media (min-width: (@xf-responsiveWide  + 1)) { [data-widget-key="newprofileposts"] { display: none ;} }

Would hide on large displays, show on smaller displays.

This would hide on small displays, show on larger displays:

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

You can find the classes or tags by inspecting your site. If you let me know which block you want to hide, I can help with the class.

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.