Skip to content
Submitted about 5 years ago

Responsive page using CSS Flexbox

Lizzard•170
@LizzardMedeiros
A solution to the Fylo data storage component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Code

Please log in to post a comment

Log in

Community feedback

  • Juan Daniel Martínez•500
    @juandadev

    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! 😁

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