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

Responsive page using CSS Flexbox

Lizzard 170

@LizzardMedeiros

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


The background image does not appear entirely right for me, in the upper left corner it is not transparent

Community feedback

@juandadev

Posted

Hello Lizzard!

Your design is so accurate.

To fix the upper left corner you may want to change a little bit the structure of the layout:

  • Remove the background-image from the <body>, just keep the background-color.
  • Add another <div> container only for the background image. This needs to be a child of <body>. To place it under all elements give it a negative value to z-index like -1, if this doesn't work maybe you need to change the z-index of -container to a value above -1 like 0.
  • Set the position of this container to absolute, then place it at the bottom.
  • Finally, just add a border-radius to the upper left corner with border-top-left-radius.

Hope you could understand me. Happy coding! 😁

2

Lizzard 170

@LizzardMedeiros

Posted

@Juandamartn, thanks a lot for help! I will make these changes soon! S2

0

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