How do I space out topics from each other?

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?

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.

1 Like

1 Like

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

<tr data-topic-id="287" id="ember930" class="topic-list-item category-anything ember-view">
  <td>
    <div class="pull-left">...</div>
    <div class="right">...</div>
  </td>
</tr>

If I click on a <td> 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

5 Likes

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:

5 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.