XF 2.1 How i can change positions of widget on mobile view ?

[rg90]

Hi, I want to ask how do I make the latest posts in the mobile view before the widget share this page.
I can't move widgets when it comes to mobile viewing, I can't arrange them by myself.

I want in mobile view this order

1. First nodes (this shows well and it is the first)
2. Newest posts
3. Members online
3. Moderators online
4. Share this page
5. And my advertising.

Thanks

 

[rg90]

Why isn't the widget layout the same as it is set up on both the desktop and the mobile device?
Can someone help me ?

I need this layout as in the right image
What should I do in widget administration to achieve this?

1. New Posts
2. Moderators online
3. Members online
4. Statistics
5. Share page
When I view the forum on a desktop PC, everything is great, but it's completely different on a mobile phone.

 

[Masetrix]

Hello,

navigate to: admin.php?widgets/

Navigate to the widget that should be displayed first:
Select the position for the display and where it should appear (number)
This allows you to have all widgets displayed in the desired order....


It should be noted that everything is displayed in the desktop style as a sidebar, slides down in mobile view...

 

[rg90]

Thanks i know i set New Posts to number 1 and other widgets from the sidebar to numbers 500 600 700
and nothing happens ... it's still in the same positions

 

[rg90]

I create a test demo with same setting on my main page. https://a14dc5d3ad7cae79.demo-xenforo.com/ admin/admin

Mobile view (again bad positions, i need latest posts and members online move up)
Ignore that gray spot in middle, I put a trial Adsense ad there.
This is only a DEMO with the same settings that I use on my main page, but I don't want to put it here.

Widget settings

 

[Masetrix]

What you display is an advertisement, which you put in the last place in the desktop style under the side navigation, then it also appears in the last place in the mobile.

The advertising position should be "container content; above" or similar.

This mix of positions between advertising and widgets has already given me gray hair. You have to experiment with which compromise you can make

 

[BassMan]

Mobile view (again bad positions, i need latest posts and members online move up)
Ignore that gray spot in middle, I put a trial Adsense ad there.
This is only a DEMO with the same settings that I use on my main page, but I don't want to put it here.

That's because you add Forum statistics and Share this page widget to the forum list, it's not in the sidebar.

You can add the code to extra.less template to hide those 2 widgets in the forum list on mobile only, then add 2 new Forum statistics and Share this page widgets to sidebar with the code in extra.less to hide those on the desktop.

 

[rg90]

I apologize for my English. Or I express myself incorrectly. But I'm obviously wrong, I don't know if what I'm asking for is possible at all or not.

I want to keep the look - displayed in the desktop version
But I want to change the layout in the mobile view

It looks great in the desktop version, but it's bad on the mobile interface
I want to keep this desktop view. I just want to change it mobile if possible.

Exactly like this

First - Latest posts
Second - Staff online
Third - Members online
Fourth - Forum statistics
Five - Share this page

Is anyone able to sign up for this demo and fix it please?
I will be very grateful to you, I don't know how to deal with it at all.

 

[BassMan]

Like said, create another 2 widgets and add them to sidebar (set the order to suit your needs): forum statistics and Share this page and add your widget key name.

Then add this code to your extra.less template:

@media (max-width: @xf-responsiveMedium) {
    [data-widget-key="forum_overview_forum_statistics"], [data-widget-key="forum_overview_share_page"] {
        &.block {
            display: none;
        }
    }
}
@media (min-width: @xf-responsiveMedium) {
    [data-widget-key="your_widget_key_for_forum_statistics"], [data-widget-key="your_widget_key_for_share_page"] {
        &.block {
            display: none;
        }
    }
}

Change your_widget_key_for_forum_statistics and your_widget_key_for_share_page with your widget key for newly created widgets. Those new widgets will show only on mobile.

 

[rg90]

Oh thank you. I'll try it. I was hoping that it would just be easy to move .. and not do it via css but what can be done.

 

[rg90]

I tried, it's too complicated. I returned those widgets to their default positions in to sidebar like in default theme.
This is very complicated in Xenforo, that I can't throw widgets where I want. But still thank you for your help and time.

 

[rg90]

I try it again now, so this layout not work.
I try it with this code and i create two new widgets, i set this widget in Forum list: Below nodes.
This code only disable the previous two widget ... but otherwise it won't solve anything.

Please if anyone is interested write me a DM, I will send the money to paypal for this.
This layout is important to me when it comes to the look of the forum.
You can make the change directly on my sharp template, I have backups.

Thanks

 

[BassMan]

Well, I can take a look if you wish...

 

[rg90]

OK. I send link in to DM

 

[rg90]

@BassMan helped me, and his tutorial was working, he did it right on my site. I was just doing something wrong so I couldn't do it.

So the correct procedure is as follows ⬇

@media (max-width: @xf-responsiveMedium) {
    [data-widget-key="forum_overview_forum_statistics"], [data-widget-key="forum_overview_share_page"] {
        &.block {
            display: none;
        }
    }
}
@media (min-width: @xf-responsiveMedium) {
    [data-widget-key="forum_overview_forum_statistics_mobile"], [data-widget-key="forum_overview_share_page_mobile"] {
        &.block {
            display: none;
        }
    }
}

+ create 2 new widgets

1. Share this page (Widget key - forum_overview_share_page_mobile) Forum list: Sidebar 50
2. Forum statistics (Widget key - forum_overview_forum_statistics_mobile) Forum list: Sidebar 30


Now everything works the way I wanted. Thanks