Reduce vertical space between filenames and tasks in group by filename query

[HynDuf]

Consider this query

group by filename

The vertical space between the filename (2023-01-28) and the tasks is quite large.

I want to reduce it. Could you guys show me how to solve this? Maybe some CSS stuff? Thanks a lot.

[claremacrae]

Hi @HynDuf7,

Here's what that kind of thing looks like in Vanilla Tasks styling - with the default theme and no CSS snippets:

I am afraid that I don't have the capacity to give advice on styling.

What I can do, in case it gets you started, is to share the CSS Snippet file that I personally use for styling Tasks Group headings in my own vault, so that you can copy that and experiment with it.

.obsidian/snippets/tasks-group-headings.css:

h4.tasks-group-heading {
    background-color: rgba(255, 255, 0, 0.15) !important;
    font-size: 16px;
    line-height: 16px;
}

h5.tasks-group-heading {
    background-color: rgba(188, 243, 158, 0.24) !important;
    font-size: 15px;
    line-height: 15px;
}

h6.tasks-group-heading {
    background-color: rgba(243, 191, 224, 0.24) !important;
    font-size: 14px;
    line-height: 14px;
}

/*h6.tasks-group-heading {*/
/*    background-color: rgba(240, 240, 240, 0.2) !important;*/
/*}*/

h5.tasks-group-heading, h6.tasks-group-heading {
    color: var(--text-muted) !important;
    text-decoration: underline !important;
}

.tasks-group-heading .tag {
    background-color: rgba(255, 255, 0, 0.42) !important;
}

.tasks-group-heading p {
    margin-block-start: 0px;
    margin-block-end: 0px;
    line-height: 1.0;
}

If you need more help, I would recommend asking in the #appearance channel on Obsidian Members Discord.

[muurky]

Rats, this didnt work for me :( not even a slight change across anything. Thanks for responding though!

[HynDuf]

Hmm it works for me. Do you by any chance, haven't enabled the css file in the Obsidian settings?

[muurky]

Yeah I use css for other parts of Obsidian. I have also tried the !important tag to override the theme I use. That is about the limit of my coding :D

[HynDuf]

Btw, you can ctrl+shift+i and inspect the "gap" element and try to change that directly from inside Obsidian. If it works, just have the same css config as that one in a different css file.

[muurky]

Appreciate you getting back to me, after some digging I ended up using the below to amend the various margins:

 ul {
    display: block !important;
    list-style-type: disc !important;
    margin-block-start: 10px !important;
    margin-block-end: 2em !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
    padding-inline-start: 30px !important;
}

Thought I would share in case it helps others!

[claremacrae]

Also, you said horizontal space, but I am assuming you meant vertical space.