Mobile view homepage guide

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:

4 Likes

You can have a look at this:

2 Likes

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.

1 Like

Can you teach me?

2 Likes