{"action":"created","issue":{"url":"https://api.github.com/repos/kolber/audiojs/issues/88","labels_url":"https://api.github.com/repos/kolber/audiojs/issues/88/labels{/name}","comments_url":"https://api.github.com/repos/kolber/audiojs/issues/88/comments","events_url":"https://api.github.com/repos/kolber/audiojs/issues/88/events","html_url":"https://github.com/kolber/audiojs/issues/88","id":9887937,"number":88,"title":"Changing width of player","user":{"login":"kevinm83","id":3208265,"avatar_url":"https://avatars.githubusercontent.com/u/3208265?v=3","gravatar_id":"","url":"https://api.github.com/users/kevinm83","html_url":"https://github.com/kevinm83","followers_url":"https://api.github.com/users/kevinm83/followers","following_url":"https://api.github.com/users/kevinm83/following{/other_user}","gists_url":"https://api.github.com/users/kevinm83/gists{/gist_id}","starred_url":"https://api.github.com/users/kevinm83/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kevinm83/subscriptions","organizations_url":"https://api.github.com/users/kevinm83/orgs","repos_url":"https://api.github.com/users/kevinm83/repos","events_url":"https://api.github.com/users/kevinm83/events{/privacy}","received_events_url":"https://api.github.com/users/kevinm83/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2013-01-11T17:38:38Z","updated_at":"2015-09-10T20:26:05Z","closed_at":null,"body":"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:\r\n\r\nChanged width to 220px\r\n\r\n    .audiojs { width: 220px; height: 36px; background: #404040; overflow: hidden; font-family: \r\n    monospace; font-size: 12px; background-image: -webkit-gradient(linear, left top, left \r\n    bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, \r\n    #444))\r\n\r\nChanged width to 120px\r\n\r\n    .audiojs .scrubber { position: relative; float: left; width: 120px; background: #5a5a5a; \r\n    height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: \r\n    0px; overflow: hidden; }\r\n\r\n\r\nYou can see it live at http://www.keepingcurrentmatters.com/test/player/\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/kolber/audiojs/issues/comments/139369537","html_url":"https://github.com/kolber/audiojs/issues/88#issuecomment-139369537","issue_url":"https://api.github.com/repos/kolber/audiojs/issues/88","id":139369537,"user":{"login":"jtphelan","id":1500776,"avatar_url":"https://avatars.githubusercontent.com/u/1500776?v=3","gravatar_id":"","url":"https://api.github.com/users/jtphelan","html_url":"https://github.com/jtphelan","followers_url":"https://api.github.com/users/jtphelan/followers","following_url":"https://api.github.com/users/jtphelan/following{/other_user}","gists_url":"https://api.github.com/users/jtphelan/gists{/gist_id}","starred_url":"https://api.github.com/users/jtphelan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jtphelan/subscriptions","organizations_url":"https://api.github.com/users/jtphelan/orgs","repos_url":"https://api.github.com/users/jtphelan/repos","events_url":"https://api.github.com/users/jtphelan/events{/privacy}","received_events_url":"https://api.github.com/users/jtphelan/received_events","type":"User","site_admin":false},"created_at":"2015-09-10T20:26:05Z","updated_at":"2015-09-10T20:26:05Z","body":"This works well for me. \r\n\r\nLESS\r\n```less\r\n.audiojs * { -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; }\r\n.audiojs { height: 2.5em; color: #fff; background: #333; position: relative; z-index: 1; }\r\n.audiojs > div { position: absolute; }\r\n.audiojs {\r\n  .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;\r\n    p { display:none; }\r\n    .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; }\r\n    .pause { width: 0.75em; height: 0.75em; position: absolute; top: 50%; left: 50%; margin: -0.375em 0 0 -0.375em;}\r\n    .pause:before, .pause:after { width: 40%; height: 100%; background-color: #fff; content: ''; position: absolute; top: 0; }\r\n    .pause:before { left: 0;}\r\n    .pause:after { right: 0;}\r\n  }\r\n  .play-pause:hover, .play-pause:focus {background-color: #222;}\r\n  .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; }\r\n  .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; \r\n    div { width: 0; height: 100%; position: absolute; left: 0; top: 0;}\r\n    .loaded {background-color: #555;  z-index: 1;}\r\n    .progress {background: green; z-index: 2; }\r\n  }\r\n}\r\n```"}}