parallax.js limits width?!

Question

parallax.js limits width?!

Closed this issue 2 years ago · 1 comments

Hey there! I've been designing my portfolio with parallax.js.

index.html

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
    />
    <title>Portfolio - SubNerd</title>
    <meta
      name="description"
      content="somePythonProgrammer's portfolio website!"
    />
    <link rel="stylesheet" href="./css/main.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.6.3.min.js"
      integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="scene" id="scene">
      <!--Content-->
      <div data-depth="0.1" class="container">
        <div class="profile fadeOnScroll">
          <img
            class="profile"
            src="https://avatars.githubusercontent.com/u/74598401?v=32"
            alt="Profile Picture"
          />
        </div>
        <div class="username fadeOnScroll">SubNerd</div>
        <div class="userdesc fadeOnScroll">
          I'm a <span class="userdesc userage"></span> year old programmer and
          amateur astronomer.
        </div>
        <br><br>
        <p class="fadeOnScroll">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis
          minima fuga debitis quasi eius aliquid sapiente? Cumque blanditiis
          quibusdam, ex totam aliquam provident alias culpa, sit illo, eum
          doloribus doloremque. Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Excepturi reprehenderit voluptatum aperiam pariatur
          numquam praesentium recusandae, ipsa at iusto eveniet, distinctio sunt
          dolore nemo veniam maiores vitae deserunt cum ducimus.
        </p>
        <p class="fadeOnScroll">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis
          minima fuga debitis quasi eius aliquid sapiente? Cumque blanditiis
          quibusdam, ex totam aliquam provident alias culpa, sit illo, eum
          doloribus doloremque. Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Excepturi reprehenderit voluptatum aperiam pariatur
          numquam praesentium recusandae, ipsa at iusto eveniet, distinctio sunt
          dolore nemo veniam maiores vitae deserunt cum ducimus.
        </p>
      </div>
      
      <!--Background-->
      <div data-depth="4" class="background"></div>
    </div>

    <script src="./js/homepage.js"></script>
    <script src="./js/fade.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

main.css

body {
  height: fit-content;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #333;
  background: #fff;
}

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #000000dd #00000000;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(0, 0, 0, 0.61);
  backdrop-filter: blur(5px);
  border-radius: 64%;
}

*::-webkit-scrollbar-track {
  background: #0000;

  background-color: rgba(0, 0, 0, 0.61);

  backdrop-filter: blur(5px);
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid #0000;

  background-color: rgba(0, 0, 0, 0.61);

  backdrop-filter: blur(5px);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blur {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(5px);
  }
}

@keyframes unblur {
  0% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0px);
  }
}

@keyframes enlarge {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes shrink {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.horisontal-spacer {
  height: 40%;
  flex: 1;
}

.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.background {
  background-color: #ff0000aa;
  backdrop-filter: blur(5px);
  border-radius: 10px;
  width:100%;
  height: 100%;
  z-index: 0;
}

.container {
  backdrop-filter: blur(5px);
  background-color: #00000022;
  border-radius: 10px;
  width:100%;
  height: fit-content;
  z-index: 1;
  padding: 32px;
}

.profile {
  width: 100%;
  border-radius: 10%;
  animation: fadeIn 0.5s ease-in-out;
}

.username {
  font-size: 64px;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 4%;
  animation: fadeIn 0.5s ease-in-out;
  text-align: center;
  color:turquoise;
}

.userdesc {
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 4%;
  animation: fadeIn 0.5s ease-in-out;
  text-align: center;
  color: black;
}

When you view the result, the 'container' div is not actually 100% width, and it won't increase its width no matter what.
Preview

Answer 1 · 2023-01-26T17:00:27.000Z

Whoops! The problem wasn't Parallax. It was Bootstrap! My bad!