Changing width of player

I’m trying to use a 220px wide player, rather than 460, but am having issues adjusting accordingly. I have the player at a 220px with, play button is fine, and progress bar width is fine, but am having issues. I can not get the time to show. I know I am missing something, but can’t figure out what. Any help is greatly appreciated. Changes I made are below:

Changed width to 220px

.audiojs { width: 220px; height: 36px; background: #404040; overflow: hidden; font-family: 
monospace; font-size: 12px; background-image: -webkit-gradient(linear, left top, left 
bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, 
#444))

Changed width to 120px

.audiojs .scrubber { position: relative; float: left; width: 120px; background: #5a5a5a; 
height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 
0px; overflow: hidden; }

You can see it live at http://www.keepingcurrentmatters.com/test/player/

[brendon]

Here’s a more responsive solution:

.audiojs {
    display: table;
    width: 100%;
    height: 34px;

    .play-pause, .scrubber, .time {
        display: table-cell;
        float: none;
        height: auto;
        vertical-align: middle;
    }

    .play-pause {
        padding: 0 6px;

        > p {
            margin: 0;
            padding: 0;
            height: 26px;
        }
    }

    .scrubber {
        width: 99%;
        margin: 0;
        padding: 0;

        > div {
            position: relative;
            margin: 0;

            &.progress {
                z-index: 2;
            }

            &.loaded {
                margin-top: -14px;
                z-index: 1;
            }
        }
    }

    .time {
        line-height: normal;
        margin: 0;
        padding: 0 12px;
        width: auto;
    }
}

It’d be great if the width of the progress bars were set in percentages instead of pixels, then it could be truly responsive.

[jtphelan]

This works well for me.

LESS

.audiojs * { -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; }
.audiojs { height: 2.5em; color: #fff; background: #333; position: relative; z-index: 1; }
.audiojs > div { position: absolute; }
.audiojs {
  .play-pause { width: 2.5em; height: 100%; text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; left: 0; border-right: 1px solid #111;
    p { display:none; }
    .play { width: 0; height: 0; border: 0.5em solid transparent; border-right: none; border-left-color: #fff; content: ''; position: absolute; top: 50%; left: 50%;     margin: -0.5em 0 0 -0.25em; }
    .pause { width: 0.75em; height: 0.75em; position: absolute; top: 50%; left: 50%; margin: -0.375em 0 0 -0.375em;}
    .pause:before, .pause:after { width: 40%; height: 100%; background-color: #fff; content: ''; position: absolute; top: 0; }
    .pause:before { left: 0;}
    .pause:after { right: 0;}
  }
  .play-pause:hover, .play-pause:focus {background-color: #222;}
  .time { width: 8.75em; height: 100%; line-height: 2.5em; /* 40 */ text-align: center; z-index: 2; top: 0; border-left: 1px solid #111; right: 0; }
  .scrubber { height: 0.875em; /* 14 */ background-color: #222; cursor: pointer; z-index: 1; top: 50%; right: 9.75em; /* 110 */ left: 3.5em; /* 110 */ margin-top: -0.438em; 
    div { width: 0; height: 100%; position: absolute; left: 0; top: 0;}
    .loaded {background-color: #555;  z-index: 1;}
    .progress {background: green; z-index: 2; }
  }
}