# Audio Component - Reduce padding around track names

**URL:** <https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901>\
**Category:** Elements\
**Created:** [July 3, 2026, 3:16pm UTC](https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901 "2026-07-03T15:16:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [July 3, 2026, 3:16pm UTC](https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901/1 "2026-07-03T15:16:37Z")

</div>

I am wondering if there is a way to reduce the padding around the track names in the track list in the audio component? I’ve attached a screenshot. I really would like the track entries to not take up so much vertical space. Thank you!

 ![Screenshot 2026-07-03 at 10.10.44 AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/6/4627961d190b92090bb32076be90351a40c098d0.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 3, 2026, 3:45pm UTC](https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901/2 "2026-07-03T15:45:54Z")

</div>

Not with the built-in controls, however you could add this little bit of CSS to control it…

Paste this into the CSS Extra Code area for that page:

```auto
.tight-tracklist [class*='track'] {
padding-top: 2px !important;
padding-bottom: 2px !important;
}

.tight-tracklist [class*='track-item'],
.tight-tracklist [class*='trackItem'],
.tight-tracklist [class*='track_item'] {
padding: 2px 2px !important;
}

```

The player won’t look any different in Edit mode, but it will look different when you Preview and publish it.

 ![CleanShot 2026-07-03 at 4 .43.50@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/4/a4ea818bf64123abe62f061e135a0bf2d0fb0aa4.jpeg)

---

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [July 3, 2026, 5:59pm UTC](https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901/3 "2026-07-03T17:59:57Z")

</div>

Hi Dan,

Thank you so much again for this. Unfortunately it does not seem to work for me as nothing changes. I have tried starting the CSS code on line 1 and line 2, but it doesn’t help. Is it possible for you to send me the Elements project that you created so I can copy it from there maybe?

Many thanks

---

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [July 3, 2026, 6:01pm UTC](https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901/4 "2026-07-03T18:01:44Z")

</div>

This is what my editor looks like…I’m not sure what the red blocks on the edge mean?

 ![Screenshot 2026-07-03 at 1.00.44 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/d/ddceff115e6375a31a57e389ba15b5b6c55f02bf.jpeg)

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 3, 2026, 6:21pm UTC](https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901/5 "2026-07-03T18:21:50Z")

</div>

remove all of the `\` (backslashes) and it should start working for you 😊

---

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [July 3, 2026, 7:46pm UTC](https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901/6 "2026-07-03T19:46:00Z")

</div>

Hi Ben,

This is what I have now, but it still doesn’t seem to change anything.

 ![Screenshot 2026-07-03 at 2.43.54 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/9/19125e0408107746123d1c42339eb29cc0a65674.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 3, 2026, 8:01pm UTC](https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901/7 "2026-07-03T20:01:58Z")

</div>

Sorry about that, give this code snippet a try instead:

```auto
  [class*='track'] {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  [class*='track-item'],
  [class*='trackItem'],
  [class*='track_item'] {
    padding: 2px 2px !important;
  }

```

I’ve also uploaded a working sample project to Element Cloud that you can take a look at…  
👉 [Open Project Elements](elementsapp://downloadDocument/qC7CLF24jwWW)

---

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [July 4, 2026, 5:13am UTC](https://forums.realmacsoftware.com/t/audio-component-reduce-padding-around-track-names/56901/8 "2026-07-04T05:13:18Z")

</div>

Hi Dan!

Thank you! That one worked…I really appreciate your help.

Many thanks!