Mobile first HTML,CSS

Community feedback

• Account deleted

  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;
  }
  

  3. 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;
  }
  

  2

  ---

  

  Aygulio•75

  @aokdirovaPosted over 4 years ago

  @juanmesa2097 Thanks a lot! Fixed it as per your recommendations!

  0

  Account deleted

  @aokdirova it was nothing. I'm glad it helped.

  0
• 

  Alejandro Ramírez•300

  @alejatraveler98Posted over 4 years ago

  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

  0

  ---

  

  Aygulio•75

  @aokdirovaPosted over 4 years ago

  @alejatraveler98 Thank you so much!

  1