XF 2.1 Disable widget or customise for mobile view

[Kirby12]

Hi all.

I've done some searching and can't seem to find what i'm looking for...

Basically i've got a TitanEmbed widget installed in the Forum Overview: Top area. It works fantastically on computer but on mobile it just doesn't do the job, far to small (even though i've set it to scale correctly etc), can literally not even see one full message line.

So my question, is there a way I could potentially get it to either a) work correctly on mobile, by making it taller (more height) or b) just disable it on mobile.

I've attached a couple of screens just so you get a feel for what I mean.

Any help would be greatly appreciated. I'm no wizard with CSS but usually get by with the search function but im struggling to find anything suitable this time.

Thanks

- Kirby

 

[Kirby12]

Anyone help at all? Im going around in circles with this. Is there a way to make the widget just display in mobile or just display on website? Widget is positioned at Forum Overview: Top.

Thanks

 

[Kirby12]

Hi all.

posted this in another section but getting desperate now so hoping someone can help me because im literally pulling my hair out at the moment lol.

Basically i've got a TitanEmbed widget installed in the Forum Overview: Top area. It works fantastically on computer but on mobile the padding needs to be more because it is just too small.

So my question, is there a way I could potentially get it to either a) work correctly on mobile, by making the padding higher just for mobile or b) make a widget available on desktop only or mobile only (ill be able to make one suitable for each then)

.

I've attached a couple of screens just so you get a feel for what I mean.

Any help would be greatly appreciated. I'm no wizard with CSS but usually get by with the search function but im struggling to find anything suitable this time.

Thanks

- Kirby

 

[Ozzy47]

Add this to your extra.less

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

Change new_threads_forum_list to your widget key. You can find the correct key to use when you're editing the widget.

 

[Masetrix]

Try this...

@media (min-width: 650px) {.block[data-widget-id="??"] {display: none;}

Dont show Widget with ID "??" on Screens > then 650 px

 

[Ozzy47]

Answered in the other thread.

 

[Kirby12]

Add this to your extra.less

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

Change new_threads_forum_list to your widget key. You can find the correct key to use when you're editing the widget.

added as instructed but it is still displaying on mobile? am i doing something wrong?

 

[Kirby12]

Try this...

@media (min-width: 650px) {.block[data-widget-id="??"] {display: none;}

Dont show Widget with ID "??" on Screens > then 650 px

also tried this and no luck. am I using the correct widget ID? see pic above

 

[BassMan]

This is one way you can hide HTML widget on mobile.

Add this to your HTML widget (so wrap your widget content with <span class="test"> ... </span>:

<span class="test">
< here is your widget template content >
</span>

After that add this to your extra.less template:

@media (max-width: @xf-responsiveMedium) {
        .test {
            display: none;
    }
}

 

[BassMan]

Answered here: https://xenforo.com/community/threa...ustomise-for-mobile-view.166982/#post-1359476

 

[Masetrix]

also tried this and no luck. am I using the correct widget ID? see pic above

No you can move your mousecursor to the link to your widget in Widgetsview. (https://www.yourdomain.tld/admin.php?widgets/)

You see something like this

https://www.yourdomain.tld/admin.php?widgets/suchen-im-netz.11/edit

The ID is here "11" an we use:

@media (min-width: 650px) {.block[data-widget-id="11"] {display: none;}

 

[Kirby12]

This is one way you can hide HTML widget on mobile.

Add this to your HTML widget (so wrap your widget content with <span class="test"> ... </span>:

<span class="test">
< here is your widget template content >
</span>

After that this to your extra.less template:

@media (max-width: @xf-responsiveMedium) {
        .test {
            display: none;
    }
}

thank you this has worked to disable it for mobile.

is there a way i can now make another widget and have it for MOBILE ONLY. (so i can adjust the padding for the widget to suit mobile screen). what would I have to put in extra.less to disable it for everything except mobile?

 

[BassMan]

is there a way i can now make another widget and have it for MOBILE ONLY. (so i can adjust the padding for the widget to suit mobile screen). what would I have to put in extra.less to disable it for everything except mobile?

Yes.

Add this to your new HTML widget (so wrap your widget content with <span class="test2"> ... </span>:

<span class="test2">
< here is your widget template content >
</span>

After that add this to your extra.less template:

@media (min-width: @xf-responsiveMedium) {
        .test2 {
            display: none;
    }
}

 

[Kirby12]

No you can move your mousecursor to the link to your widget in Widgetsview.

You see something like this

https://www.yourdomain.tld/admin.php?widgets/suchen-im-netz.11/edit

The ID is here "11"

thanks here was me thinking its the widget key lol. the option above from @BassMan has successfully removed this widget for mobile now i just need to know how to be able to make another one (which i can increase the padding on) and have it show only for mobile.

if you guys could assist id be very grateful. many thanks

 

[Kirby12]

Yes.

Add this to your new HTML widget (so wrap your widget content with <span class="test2"> ... </span>:

<span class="test2">
< here is your widget template content >
</span>

After that add this to your extra.less template:

@media (min-width: @xf-responsiveMedium) {
        .test2 {
            display: none;
    }
}

Honestly your a hero thank you bud.

and thanks to everyone else too. One happy xenforo user here lol.