Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Desktop site deployed with Vercel

@drametoid

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What should I do to maintain aspect ratio of all elements on mobile site as well?

Community feedback

Martin 1,150

@ringm

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord