Lin's Fylo Data Storage Component

Community feedback

• 

  

  Emmilie Estabillo•5,600

  @emestabillo

  Posted about 5 years ago

  Hi @linzhangcs, great desktop implementation here. For your question regarding the background, I think it's better to put it inside body or main-container and look into background-position property. Here is another page with examples. This gives you the option to delete the background div altogether. Would've liked to see a mobile version of the project :-) Hope this helps!

  11
• 

  Jiro Ricaro•715

  @jiroRi

  Posted about 5 years ago

  Your work pretty much on the component itself is really great!

  However, here's a workaround I tried to be able to fix your solution's responsiveness, mainly the background for desktop version and multiple screensizes especially for bigger screens:

  .body

  • added height: 100vh; and display: flex;.

  .background

  • changed position: absolute; to position: fixed;
  • added background-size: 100% 50%;
  • changed height: 420px; to 100%;
  • added background-position-y: 100%;

  .main-container

  • remove the height: 800px; or just set it to height: auto;

  .data-storage

  • from margin: 45px auto 60px to margin: 0 auto;

  Let me know if I were able to be of help. Best of luck bro and keep at it! 💪

  11
• 

  Ovidiu-Antonio•3,125

  @ovidiuantonio

  Posted about 5 years ago

  As @emestabillo said you did a great work on the desktop version, it looks very nice.

  These are the media queries I use in every solution (I think this will help you to create the mobile version):

  • 0-600px (mobile)
  • 600-900px (tab port)
  • 900-1200px (tab land)
  • 1200px (large screens)

  Happy coding! Keep going!

  01