my first challenge (flexbox, responsive design, animation)

Community feedback

• 

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  Hello Stephan Schmidt 👋🏻 . Nice animation, good job, mate. 🚀

  Just one thing, your background images are not in place.

  I've seen to ways to solve that:

  -One with psudo-elements:

  component-wrapper:before { top: 0; left: 0; background: url(/images/bg-pattern-top.svg) no-repeat bottom right; }

  .component-wrapper:after { top: 100%; left: 100%; background: url(/images/bg-pattern-bottom.svg) no-repeat top left; }

  Or just place it in your wrapper.

  .wrapper { background-image: url(/images/bg-pattern-top.svg), url(/images/bg-pattern-bottom.svg; background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 38vh, left 49vw top 51vh; }

  Hopefully, it helps. Happy coding🧑‍💻

  2

  ---

  

  Stephan Schmidt•85

  @LE-SmithPosted almost 4 years ago

  @RenszCamacho Hi, thank you for your feedback. Which Browser did you used? Because in my Chrome / Firefox it looks great. I positioned them absolut, maybe that's the issue.

  0

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  @LE-Smith I use both. I think, the issue is because I got a large screen. Even on my Iphon looks funky.

  1

  

  Stephan Schmidt•85

  @LE-SmithPosted almost 4 years ago

  @RenszCamacho yes, unfortunatelly i have no large screen, to test it on my own. but i will change something tomorrow. I saw your solution, and yes it makes sense, to not use absolut Pixel-Positioning, looks better in my opinion. Great work by the way, also the animation is awesome ;)

  1