How To Make The HomePage Contain Category While using Mobile Phone

Development

AI-generated summary

The user Lord_Praise asked how to display categories on the homepage when using a mobile phone, as they are not visible on mobile despite appearing correctly on desktop. Don provided a detailed solution using CSS by creating a custom component in the theme settings, specifically targeting the mobile view. The solution involves adding the CSS rule .category-breadcrumb.hidden { display: flex !important; } in the mobile section of the component’s CSS. Lord_Praise confirmed the fix worked, and Jonathan5 praised the clear instructions and effectiveness of the solution.

1

image
image528×859 105 KB

as you can see, if you view the website on mobile phone, you will not be able to see a category on the home page(https://theantsforum.allstarunion.com/), I was wondering if there is any way to have the category option show up on mobile phone

If you use PC, it will be no problem, you can see the category is showed up there perfectly

image
image1089×681 65.6 KB

2

Hello,

This is possible with CSS. You have to create a new component.

  1. Go to /admin/customize/themes/
    Customize → Themes

  2. Click the Components tab and then the Install button

  3. On the popup window click Create new button and type the new component name.

    Screenshot 2022-07-26 at 12.04.02
    Screenshot 2022-07-26 at 12.04.02733×335 17.8 KB

  4. Click Create button.

  5. The component created. Now select which theme(s) you want to activate it.

    Screenshot 2022-07-26 at 12.06.13
    Screenshot 2022-07-26 at 12.06.13628×132 8.32 KB

  6. Now click the Edit CSS/HTML button.

    Screenshot 2022-07-26 at 12.07.53
    Screenshot 2022-07-26 at 12.07.53670×240 11.7 KB

  7. Now click the Mobile tab and paste the below code to the CSS section.

    Screenshot 2022-07-26 at 12.10.31
    Screenshot 2022-07-26 at 12.10.311096×480 23.3 KB

.category-breadcrumb.hidden {
  display: flex !important;
}
  1. Click Save. Done! :slightly_smiling_face:

Screenshot 2022-07-26 at 12.13.42
Screenshot 2022-07-26 at 12.13.42498×311 24.1 KB

3

Why are you so genius :grinning: thanks so much. Issue Fixed

5

This is set out extremely well and works perfectly. Thank you very much.