# Mobile view homepage guide

**URL:** https://meta.discourse.org/t/mobile-view-homepage-guide/282904
**Category:** Development
**Created:** [October 20, 2023, 2:21pm UTC](https://meta.discourse.org/t/mobile-view-homepage-guide/282904 "2023-10-20T14:21:55Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [October 20, 2023, 2:21pm UTC](https://meta.discourse.org/t/mobile-view-homepage-guide/282904/1 "2023-10-20T14:21:55Z")

</div>

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

 ![Screenshot 2023-10-20 at 3.15.41 PM](https://global.discourse-cdn.com/meta/original/4X/7/8/e/78e7543a26faafa35d60d2e567b3b06bdfb94320.png)

But not visible on mobile view

 ![IMG_3548.PNG](https://global.discourse-cdn.com/meta/original/4X/0/f/9/0f9999b7d5aa3660111741b1a33c262e2829bb62.jpeg)

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?

 ![IMG_3549.PNG](https://global.discourse-cdn.com/meta/original/4X/4/6/b/46b465b51d2e03f68d9917c630a08183d696f542.jpeg)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 20, 2023, 3:20pm UTC](https://meta.discourse.org/t/mobile-view-homepage-guide/282904/2 "2023-10-20T15:20:55Z")

</div>

Hello 👋

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:

```scss
.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:

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/4/b/94b4dcdf8d335a6ad756b00600899a6bb0de7210.png)

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 🙂

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. 🙂

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 20, 2023, 4:26pm UTC](https://meta.discourse.org/t/mobile-view-homepage-guide/282904/6 "2023-10-20T16:26:23Z")

</div>

You can have a look at this:

> [@Category Dropdown in Mobile View](https://meta.discourse.org/t/category-dropdown-in-mobile-view/123344/15):
>
> I took a shot today at making it always visible and this seems to be working for me with no side effect that I could notice: api.modifyClass("component:bread-crumbs", { pluginId: "never-hidden-bread-crumbs", hidden: false }); hidden is originally: @discourseComputed("category") hidden(category) { return this.site.mobileView && !category; }, I preferred to [make it hidden](https://github.com/renato/discourse-mobile-breadcrumbs/blob/main/javascripts/discourse/initializers/mobile-breadcrumbs-init.js) on the categories page only.

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [October 20, 2023, 5:21pm UTC](https://meta.discourse.org/t/mobile-view-homepage-guide/282904/7 "2023-10-20T17:21:59Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [October 21, 2023, 10:11am UTC](https://meta.discourse.org/t/mobile-view-homepage-guide/282904/10 "2023-10-21T10:11:14Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [October 21, 2023, 1:00pm UTC](https://meta.discourse.org/t/mobile-view-homepage-guide/282904/11 "2023-10-21T13:00:11Z")

</div>

Can you teach me?

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 21, 2023, 1:01pm UTC](https://meta.discourse.org/t/mobile-view-homepage-guide/282904/12 "2023-10-21T13:01:17Z")

</div>

> [@How To Make The HomePage Contain Category While using Mobile Phone](https://meta.discourse.org/t/how-to-make-the-homepage-contain-category-while-using-mobile-phone/233982/2):
>
> Hello, This is possible with CSS. You have to create a new component. Go to /admin/customize/themes/ Customize → Themes Click the Components tab and then the Install button On the popup window click Create new button and type the new component name. Click Create button. The component created. Now select which theme(s) you want to activate it. [Screenshot 2022-07-26 at 12.06.13] Now click the Edit CSS/HTML button. [Screenshot 2022-07-26 …
