Audio Player Width

Hello I have a site under construction here: http://ovlhs.co.uk/app/nantymoel.html

I am trying to get the player to have the same color across the width of the column, but can't seem to figure it out. Failing that I would want to color the width of the row to be the same color as the player down to the same height. If anyone could point me in the right direction I'd appreciate it.

Regards

Al

For starters, you need to take the player out of the card title container. Putting it in there with that huge top margin is definitely the wrong approach. Instead, just add a new row in the same column under the card, and then place your audio player inside it. It will automatically create it's own column. Set the column's text alignment to center (to center the player), and then you can set the background color of the column to match the color of the player. If the column's color is wider than the card, just add a 15px margin to the left and right sides of the column. If you want there to be more colored area above and below the player, just add padding to top and bottom of the column.

Now your player will stay stuck to the bottom of the card, and resize correctly, and the colored background around it won't change.