PLEASE HELP! Trying to make this animated background responsive

HTML-CSS
1

I am trying to make an animated bubbles background using HTML and CSS, but when the screen is bigger than a standard laptop screen, the bubbles do not appear anymore. I have watched so many tutorials of how to fix this but no luck :(( Can someone help with this?

Here’s the code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Animated Background</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; 
  }
    body {
      background: #140B7B;
      min-height: 100vh;
  }
  .container {
    position: relative;
    width:100%;
    height: 100vh;
    overflow: hidden;
  }
    
  .bubbles {
    position: relative; 
    display: flex;
  } 
  .bubbles span {
    position: relative;
    width: 10px; 
    height: 10px; 
    background: #ffcd3c; 
    margin: 0 4px; 
    border-radius: 50%; 
    box-shadow: 0 0 0 5px #ffcd3c44; 
    animation: animate 15s linear infinite; 
    animation-duration: calc(130s / var(--i));
  }
  .bubbles span:nth-child(even) {
    background: #ff2d75; 
    box-shadow: 0 0 0 5px #ff2d7544;
  }
    
  @keyframes animate {
    0% {
      transform: translateY(100vh) scale(0);
    } 
    100% {
      transform: translateY(-10vh) scale(1);
    }
  }

</style>
</head>

<body>
  <div class="container"> 
    <div class="bubbles">
      <span style="--i:11;"></span>
      <span style="--i:12;"></span>
      <span style="--i:24;"></span>
      <span style="--i:10;"></span>
      <span style="--i:14;"></span>
      <span style="--i:23;"></span>
      <span style="--i:18;"></span>
      <span style="--i:16;"></span>
      <span style="--i:19;"></span>
      <span style="--i:20;"></span>
      <span style="--i:22;"></span>
      <span style="--i:25;"></span>
      <span style="--i:18;"></span>
      <span style="--i:21;"></span>
      <span style="--i:15;"></span>
      <span style="--i:13;"></span>
      <span style="--i:26;"></span>
      <span style="--i:17;"></span>
      <span style="--i:13;"></span>
      <span style="--i:28;"></span>
      <!--END-->
      <span style="--i:11;"></span>
      <span style="--i:12;"></span>
      <span style="--i:24;"></span>
      <span style="--i:10;"></span>
      <span style="--i:14;"></span>
      <span style="--i:23;"></span>
      <span style="--i:18;"></span>
      <span style="--i:16;"></span>
      <span style="--i:19;"></span>
      <span style="--i:20;"></span>
      <span style="--i:22;"></span>
      <span style="--i:25;"></span>
      <span style="--i:18;"></span>
      <span style="--i:21;"></span>
      <span style="--i:15;"></span>
      <span style="--i:13;"></span>
      <span style="--i:26;"></span>
      <span style="--i:17;"></span>
      <span style="--i:13;"></span>
      <span style="--i:28;"></span>
     
    </div>
  </div>
     
</body>
</html>

Here is a screenshot of what it looks like on my laptop screen (this is what I want to achieve with a bigger screen)

Screen Shot 2022-11-05 at 12.53.41 PM
Screen Shot 2022-11-05 at 12.53.41 PM1414×878 13.5 KB

Here is what it looks like on a bigger screen. The bubbles are not appearing on the right side

Screen Shot 2022-11-05 at 12.53.12 PM
Screen Shot 2022-11-05 at 12.53.12 PM2260×872 13.7 KB

Can someone please help with this? :(((

2

Maybe try an auto grid instead.

.bubbles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
}
1 Like
3

IT WORKS!!! Thank you so so much! You have no idea how frustrated I was haha. Can you explain why this works? What do the grid-template-column do?

4

You will have to learn a bit about CSS grid.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.