Desktop site deployed with Vercel

Community feedback

• 

  Martin•1,150

  @ringmPosted about 4 years ago

  Hey Shubham, the site looks good! Couple suggestions to polish it:

  • Consider setting the background image in css through the background property. There you can also set the background-size and background-position to place it exactly where you need.
  • For a responsive layour, try the following:

  .wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;  
  }
  
  .bg-image {
    background-image: url(../images/bg-mobile.svg);
    background-color: #0c122c;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .container {
    width: min(90%, 860px);
    margin: auto;
  }
  
  .row {
    display: flex;
    flex-direction: column;
  }
  
  .col-30,
  .col-70 {
    width: 100%;
    border: 1px solid red;
  }
  
  @media (min-width: 600px) {
    .row {
      flex-direction: row;
    }
    
    .col-30 {
      width: 30%;
    }
    
    .col-70 {
      width: 70%;
    }
  }
  

  <div class="wrapper bg-image">
    <div class="container">
      <div class="row">
        <div class="col-30">Fylo block with logo and buttons</div>
        <div class="col-70">Fylo block with the bar and storage info</div>
      </div>
    </div>
  </div>
  

  The class bg-image should be used to place the background image.

  That should take care of the main layout for mobile and desktop, I hope it helps! Let me know if you have any doubts with the code.

  1