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

#Mobile-first approach

#accessibility

@sanketcharanpahadi

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


Hello everyone, Specifically I have a doubt about how the height of <main> element is 0 even I have not used float. I have to manually set the height of main element as 98%. Can anyone explain what is happening ? Any feedback you wish to give are welcomed.

Community feedback

Adarsh 1,560

@adram3l3ch

Posted

It is caused by you've set position absolute to its child. Position absolute will take the element out of the flow. Since that div is the only child of main if it is gone main will feel empty :(

Marked as helpful

2

@sanketcharanpahadi

Posted

@adram3l3ch Thanks for explaining so well.

1
Naveen Gumaste 10,480

@NaveenGumaste

Posted

Hello sanket kumar ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

  • You should use h1 here <p class="used">You’ve used <span>815 GB</span> of your storage</p>

  • For background img you have used cover try to use contain as it is floating in air. or another thing may be for "attribution" as it is in bottom it is pushing the img up

happy Coding😀

Marked as helpful

1

@sanketcharanpahadi

Posted

@Crazimonk Thanks for the feedback . I will change it now. Thank You

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