Fylo Storage Component ft Flex

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered correctly. So let me explain, How you can correct it.

  ---

  • You don't used the Grid wisely, so that the component has not been centered, Just add the following CSS rules.

  ---

  body {
      display: grid;
      place-items: center;
      min-height: 100vh
  }
  

  • Now remove these styles, after removing you can able to see the changes

  body {
     place-content: center;
     margin: 10% 0;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1
• 

  manjubhaskar02•340

  @manjubhaskar02Posted over 1 year ago

  Congratulations on taking up this challenge!

  I could help you with the part you struggled the most.

  HTML

   <div class="progress-bar">
          <div class="progress">
            <div class="round"></div>
          </div>
        </div>
  

  CSS

  .progress-bar {
      background-color: var(--Very-Dark-Blue);
      width: 100%;
      height: 18px;
      border-radius: 50px;
      padding: 0px 2px;
  }
  
  .progress {
      background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
      width: 75%;
      height: 16px;
      border-radius: 50px;
      position:relative;
      }
  
  .round {
      position: absolute;
      background-color: white;
      width: 15px;
      height: 15px;
      right: 0px;
      border-radius: 100%;
  }
  
  

  Or you can use this one too!

  .progress-bar {
    background-color:  var(--Very-Dark-Blue);
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0 2px;
    display: flex;
    height: 18px;
    width: 100%;
  }
  
  .progress {
    border-radius: 100px;
    background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    height: 16px;
    width: 75%;
    position:relative;
  }
  
  .round {
      position: absolute;
      background-color: white;
      width: 15px;
      height: 15px;
      right: 0px;
      border-radius: 100%;
  }
  
  

  There may be mistakes as I am a self-learner, you could add to it if you get better suggestions.

  Hoping this would be helpful for you!

  Happy Coding Journey!

  Marked as helpful

  0