Topics appear to be very compressed, especially on mobile. I don’t know how to change this with CSS. I looked through the css guide on W3Schools and source code. How can I do this? Is it even possible?

Thanks for posting the screen capture. For you to become self sufficient in making minor CSS tweaks to your Discourse you should gain some understanding of basic CSS and become familiar with your browsers dev tools. AFAIK, although there are some differences, all recent major browsers have this tool. For example, I go to your site and make sure its in mobile view (../latest?mobile_view=1) Then I right-click Inspect over where I’m interested in making a change. [blinqchat-1] Doing this opens dev tools and I can look at the HTML to see what there is to work with. In this case it’s a series of table rows ... ... If I click on a element and look on the right I can see what CSS is being applied to it [blinqchat-2] To see if I’m in the right ballpark i can uncheck padding and see what the effect is [blinqchat-3] That looks like what I want to edit. Clicking on the value lets me change it [blinqchat-4] So I try changing it to top-bottom 1.5em, left-right 0 to see how that looks [blinqchat-5] I can experiment with different tweaks until I’m happy, and once I’m satisfied I can save that CSS in Admin → Customize

This is presumably by design so you can show more Topics in the available space but it you prefer a different layout, for Desktop at least, consider the Topic List Previews plugin. I’ve been using it for a while now and it’s a great alternative. Also note that pinned topics show excerpts on vanilla Discourse. This helps to highlight them.

That could be a solid alternative but not in my case. It’s specifically to just space out topics.

Please post a small screen capture with a little arrow pointing to the area where you want the “space”. I’m guessing it’s only a matter of adding a mobile CSS rule adding padding or margin, but without knowing what to target it’s hard to say what that might be.

[Screenshot_20180812-121803_Chrome]

Thank you so much for that in-depth walkthrough! I’m becoming an avid fan of CSS and recently I dove into learning it because both you and @awesomerobot have motivated me. I really appreciate it :smile:

How do I space out topics from each other?

Product Support

nexo August 12, 2018, 7:18pm 5

Topic		Replies	Views
How do I make the topic list more compact? Product Support	12	489	January 27, 2025
Perfectionist - the default curve interface UX	5	313	November 2, 2024
Locked, solved, and new topic adornments are misaligned on longer titles on mobile UX	4	341	December 6, 2025
How to move the category into a column in 'Latest' Product Support	9	2377	December 11, 2018
The best way to make small ui modifications Development	2	889	October 1, 2022

How do I space out topics from each other?

Related topics