[Support request] Sidebar widget positions on mobile

[Ben]

Hi

I have a layout with the main content on the left and a sidebar on the right. The sidebar has three widgets in it, one above the other.
On mobile, when there isn’t enough space to show the sidebar to the side, all of the widgets are displayed below the main content instead.
My question – is there any way to get one of those widgets to display above the main content on mobile, but for the others to continue to display below the main content?

*edit* or is there even a way to make all three of the widgets appear above the content on mobile?

Many thanks!

[David]

Hi there,

its possible to move the entire sidebar above the content, but not an individual widget.

Try this CSS:

@media(max-width: 768px) {
    .right-sidebar .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

For a single ‘widget’ – depending on whats in the widget you could use a Block ( or Hook ) Element to add it above the content on mobile only. If you want to share a link to the site and let me know which widget should be above, i can advise.

[Ben]

Thanks David. That’s a really good idea to use a hook element. The widget just contains html so the contents could be placed under the header on mobile view only using a hook, and then I guess all the widgets could be hidden on mobile view too.
I can see that this would all work… I just need to work it out now 🙂
Thanks again!

[David]

You’re welcome

[Author]

Posts