Description of the category is not displayed at mobile version

Contribute Feature

AI-generated summary

The discussion revolves around displaying category descriptions on the mobile version of a Discourse forum. Bärbel_Hucke reports that category descriptions are not visible on mobile and seeks help. Bcat provides a CSS solution to display descriptions below the category icons on mobile by using a media query. Bärbel_Hucke asks if the description can be placed beside the icon and how to change the text color of a blue button. Bcat explains that placing the description beside the icon is difficult with CSS without risking side effects and suggests using CSS to change the button text color. UnitedFreedom asks if the description can be displayed to the right of the icon on mobile, and Jack_Sparrow suggests using CSS float and relative positioning to achieve this. John_Shankman praises the initial CSS fix provided by Bcat.

1

Hi, the descriptions of our categories aren´t shown at mobile version. Could you please help me. I´m not very familiar with CSS, but learning every day a little bit more

Dektop

Dektop
Dektop532×318 26.5 KB

Mobile

Screenshot_20200508_091835
Screenshot_20200508_0918351080×1262 59.2 KB

Thanks for your support

2

U can try add this code to css:

@media only screen and (max-width: 601px){
    .category-list.with-topics .category-list-item .category-description {
        display: table-row;
    }
}
2 Likes
Category descriptions not showing up on mobile
3

Great, thanks so much!

May I ask two questions more?

  • Is it possible to include the description right besides the icon?
    +H ow can I change the color of the font in the blue button? I couldn’t find this button in the color settings of the theme

Screenshot_20200511_094100
Screenshot_20200511_0941001080×1110 117 KB

Thank you!

4

These two are separated, so it is very difficult to change them using only CSS. Alternatively, doing so might break other components.
Generally, this is a temporary change.
Since the button’s background color has changed, we can use a CSS class to adjust the text color:

.list-controls .container #create-topic {
    color: #fff;
}

Variable color: Developing Discourse Themes & Theme Components

5

This helps! Thanks so much!

6

Hi @Bcat thank you for the useful CSS code to add descriptions for mobile.

Is it possible on mobile to have the description appear on the right side of the image, not underneath the image?

Just like this?

image
image488×328 41.8 KB

1 Like
7

Should be possible with simple css.
Float the image to left and make parent div’s position relative.

1 Like
8

bless your soul for this one

1 Like