Mobile view homepage guide

AI-generated summary

The discussion revolves around making the “all categories” and “all tags” options visible on the mobile view homepage by default. Plabforum shared screenshots of how these options are visible on PC view but not on mobile view. Canapin provided a CSS solution to reveal these inputs, but noted that it may require additional styling and could interfere with other plugins or components. However, Plabforum is not familiar with CSS and is looking for a simpler solution. JammyDodger explained that there is no UI switch for this and creating a theme component with extra code is required. Plabforum asked for guidance on how to do this, and Don shared a link to a related topic that may help.

The two options you see [all categories] [all tags], beside Latest, below header is visible in PC view

But not visible on mobile view

It can be brought by tweaking around but I want that to be visible by default on mobile view on home page, kindly guide how to enable that in mobile view?

Hello :wave:

It appears these inputs are only hidden with a .hidden class on mobile.

You can reveal them, but since they aren’t styled for the mobile view, it needs a bit more CSS rules so they don’t look too wonky.

You can start with this:

.category-breadcrumb {
    display: flex !important;
    gap: 0;
    .plugin-outlet-component {
        flex: 0;
    }
}

Put it in the Mobile tab of your theme or component.

It will look like this:

I didn’t test it very much, and it can interfere with plugins or components that use the available outlets before and after these selectors.

So, it’s probably more a work base than a fully functional thing… You can try and see how it goes :slight_smile:

Edit:

I’m told that these inputs are visible by default on a category page.

So, my CSS code in its current state will mess up a bit the layout of these fields on the category page and need more tweaks. :slight_smile:

You can have a look at this:

I actually dont know how to use CSS, matter of fact, I am not related to computer science field at all.

If there is a option that I can on or off, I can do that.

I’m afraid there is currently no UI switch for this. You would need to create a small theme component and some extra code to it to get this bespoke behaviour.

Can you teach me?