Skip to content
Submitted over 4 years ago

Responsive page using CSS Flexbox

Lizzard•170
@LizzardMedeiros
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

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

  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    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
    @LizzardMedeirosPosted over 4 years ago

    @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

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