Mobile first HTML,CSS

Hello.

The triangle isn't attached to anything so it will move whatever it wants depending on the resolution.

I don't want to change too much your code, so I'll give you 3 simple steps to fix this:

1. In the HTML put triangle-container inside of floating

2. set the next properties in .triangle-container

.triangle-container {
    bottom: 0;
    right: 0;
    position: absolute;
}

1. change the following in .triangle

BEFORE

.triangle {
     ...
     transform: translate(-329%, -150%);
}

AFTER

.triangle {
     ...
     transform: translateY(20px);
}

The best solution would be using ::before and ::after pseudo-elements to make this type of shape but that would require changing some of your code.

here's a working example

Let me know if you have any doubt.

Update: the background image is full height and doesn't correspond with the design.

You can easily fix this:

@media (min-width: 500px) and (orientation: landscape)
body {
    background-image: url(/images/bg-desktop.png);
    background-size: 100% 50%;      // <---  x, y
    background-repeat: no-repeat;
    background-position: bottom;
}

Well what I modified in the HTML was that I separated the element with the class "triangle" from the element with the class "container-triangle". Class "triangle" add last element to div with class "container"

<div class="container">
      <div class="left-container">
        <div class="logo">
          <img src="./images/logo.svg" alt="icon representing a logo">
        </div>

        <div class="icons">
          <div class="icon-1">
            <img src="./images/icon-document.svg" alt="icon representing a document" />
          </div>
          <div class="icon-2">
            <img src="./images/icon-folder.svg" alt="icon representing folder">
          </div>
          <div class="icon-3">
            <img src="./images/icon-upload.svg" alt="icon representing upload">
          </div>
        </div>
      </div>

      <div class="right-container">
        <div class="text">
          <h3>You’ve used <span>815 GB</span> of your storage</h3>
        </div>
        <div class="gradient-container">
          <div class="gradient">
            <div class="ending-point">

            </div>
          </div>
        </div>

        <div class="bottom-text">
          <div>
            0 GB
          </div>

          <div>
            1000 GB
          </div>
        </div>
      </div>

      <div class="floating-container">
        <div class="floating">
        <div>
        <h1>185</h1>
      </div>
      <div>
        <h3>GB LEFT</h3> 
      </div>
      </div>
    </div>
<div class="triangle"></div>
    
  </div>

In the CSS of the class "triangle just add a margin-left:38px

.triangle {
      
     width: 0px;
     height: 0px;
     margin-left:38px;
     border-left: 20px solid transparent;
     border-right: 20px solid var(--pale-blue);
     border-top: 20px solid var(--pale-blue);
     border-bottom: 20px solid transparent;
     transform: translate(-329%, -150%);
  }

Maybe it is not the best way but I hope it helps you