How do I space out topics from each other?

[nexo]

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?

[merefield (Robert)]

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.

[nexo]

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

[Mittineague]

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.

[nexo]

[Mittineague]

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.

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

To see if I’m in the right ballpark
i can uncheck padding and see what the effect is

That looks like what I want to edit. Clicking on the value lets me change it

So I try changing it to top-bottom 1.5em, left-right 0 to see how that looks

I can experiment with different tweaks until I’m happy, and once I’m satisfied I can save that CSS in Admin -> Customize

[nexo]

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