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 thebackground-size
andbackground-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