Lin's Fylo Data Storage Component

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!

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

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!