javascript music player covering entire width of website, how do i change width to make it much smaller

Question

i'm using a javascript music player for my website but it's covering the entire width of the website. please advice how to shorten its width. i don't want to ruin the website so i haven't tried editing anything in the music player code as i got it from another website. all the earlier issues i had with the code were resolved, only this i'm confused about at the moment.

document.querySelector('.playpause').addEventListener('click', playpause);

function playpause() {
  if (document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>') {
    document.querySelector('#musicsrc').play();
    document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
  } else {
    document.querySelector('#musicsrc').pause();
    document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
  }

}

#musicplayer {
  display: grid;
  grid-template-columns: 18px auto;
  align-items: center width: 90px;
  height: 24px;
  font-size: 11px;
  font-family: kosugi;
  color: #955136;
  line-height: 200%;
  background: white;
  border: 2px solid #F9CDE2;
  border-radius: 2px;
}

#musictitle {
  overflow: hidden;
  white-space: nowrap;
  -webkit-filter: drop-shadow(0px 0px 2px #FFB0C9);
  display: inline-block;
  width: calc(109% - 10px - 0px);
  margin-left: calc(4px + 0px);
}

#musicpixel {
  width: 120%;
  padding-top: 0px;
  position: relative;
  min-height: 20px;
  background: white;
  border-right: 2px solid #F9CDE2;
}

.overlay {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  transition: 0.3s ease;
  background: white;
}

#musicplayer:hover .overlay {
  opacity: 1;
  transition: 0.3s ease;
}

.playpause {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.playpause:hover {
  cursor: help;
}

#musicpixel img {
  display: block;
}

.marquee {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 7s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  display: table;
  margin: auto;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-image: url('https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590');
  display: table-cell;
  vertical-align: middle;
}

section {
  width: 50%;
  margin: 0 auto;
}

@font-face {
  src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
  font-family: jojoba;
}

div {
  font-family: jojoba;
  font-size: 18px;
}


/* Style the header */

header {
  background-color: #666;
  margin: auto;
  padding: 10px;
  text-align: center;
  border-color: #000000;
  font-size: 20px;
  height: 35px;
  width: 50%;
  margin: 0 auto;
  background: radial-gradient(circle, rgb(240, 242, 240, 1) 10%, rgba(217, 219, 218, 1) 43%, rgb(240, 242, 240, 1) 75%);
}


/* Create two columns/boxes that floats next to each other */

nav {
  float: left;
  width: 30%;
  height: 300px;
  /* only for demonstration, should be removed */
  background: #f1f1f1;
  padding: 20px;
}


/* Style the list inside the menu */

nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #ffffff;
  height: 300px;
  /* only for demonstration, should be removed */
  overflow-y: auto;
  direction: ltr;
  scrollbar-color: #d4aa70 #e4e4e4;
  scrollbar-width: thin;
}


/* Clear floats after the columns */

section::after {
  content: "";
  display: table;
  clear: both;
}


/* Style the footer */

footer {
  padding: 10px;
  text-align: center;
  color: white;
  height: 35px;
  width: 50%;
  margin: 0 auto;
  vertical-align: middle;
  background: rgb(219, 219, 219);
  background: radial-gradient(circle, rgb(240, 242, 240, 1) 10%, rgba(217, 219, 218, 1) 43%, rgb(240, 242, 240, 1) 75%);
}


/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */

@media (max-width: 600px) {
  nav,
  article {
    width: 90%;
    height: auto;
  }
}

<html lang="en">

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>

<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id='musicplayer'>
    <div id='musicpixel'>
      <img src='https://graphic.neocities.org/tumblr_inline_oeqayhhdhP1uqb749_500.gif'>
      <div class='overlay'>
        <div class='playpause'><i class="fas fa-play"></i></div>
      </div>
    </div>
    <div id='musictitle'>
      <span class='marquee'>きみに恋したんだ</span>
    </div>
  </div>

  <audio id='musicsrc' loop src='https://dl.dropbox.com/s/58ifb5zr8lbedlo/%E3%81%8D%E3%81%BF%E3%81%AB%E6%81%8B%E3%81%97%E3%81%9F%E3%82%93%E3%81%A0.mp3'></audio>
  <div>

    <header>

    </header>

    <section>
      <nav>
        <img src="https://barbara.crd.co/assets/images/gallery34/d0d75dc1.gif?v=078d66a6">
        <ul>
          <li><a href="#">London</a></li>
          <li><a href="#">Paris</a></li>
          <li><a href="#">Tokyo</a></li>
        </ul>
      </nav>

      <article>
        <h2> yatori <img src="https://barbara.crd.co/assets/images/gallery07/fd56c474.gif?v=078d66a6"> </h2>

        lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </article>
    </section>

    <footer>

    </footer>
  </div>
</body>

</html>

Lucretius · Answer 1 · 2022-07-01T13:57:06.847

1

Reduce the size of the div that contains the player by specifying the width property in pixels for the #musicplayer div. The CSS you provided already has a width: 90px; line however its not working because its to the right of the align-items: center; line. Move that new width line to a new line, and put a semicolon after align-items: center

#musicplayer {
  display: grid;
  grid-template-columns: 18px auto;
  align-items: center width: 90px;  /* notice this line with width in it */
  height: 24px;
  font-size: 11px;
  font-family: kosugi;
  color: #955136;
  line-height: 200%;
  background: white;
  border: 2px solid #F9CDE2;
  border-radius: 2px;
}

edited Jul 01 '22 at 13:57

answered Jul 01 '22 at 13:38

Lucretius

1,053
1
13
26

thank you. also the music player is draggable but i'm not able to drag it. do you perhaps know how to fix that too? – lainweb Jul 01 '22 at 13:40
https://stackoverflow.com/questions/9334084/moveable-draggable-div This should help. – Lucretius Jul 01 '22 at 13:55

javascript music player covering entire width of website, how do i change width to make it much smaller

1 Answers1