Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo Date Storage Component (HTML & CSS)

P
Patrick 14,325

@palgramming

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


The hardest thing about this project is still trying to get the backgrounds positioned and sized correctly to the view-port

Community feedback

@waltersono

Posted

Hi @palgramming

Love your work, and discipline.

Just made a pull request to give my suggestion on the gradient and dot position of this component.

See you

Marked as helpful

1

P
Patrick 14,325

@palgramming

Posted

@waltersono Thanks yes I guess I did overlook that fine detail on the project. Thanks for pointing that out

0
Anna Leigh 5,135

@brasspetals

Posted

Hi, Patrick! 👋 Congrats on completing another challenge!

Have you tried background-size values contain and/or cover?

0

P
Patrick 14,325

@palgramming

Posted

@brasspetals yep I have tried them but I do not think they would work with the desktop design of this project unless one created div just for the background and then absolute positioned it. But I put the background on the body

0
Anna Leigh 5,135

@brasspetals

Posted

@palgramming I was able to make the desktop like the design by doing the following:

  • Set background-size: contain on the body and remove height: 100vh
  • Add min-height: 100vh to your main and remove the margin and width values (from both base styles and media query).

Edit to add: It might also help to poke around at my solution here and play around in the dev tools.

0
P
Patrick 14,325

@palgramming

Posted

@brasspetals Thanks I looked at yours and see what you did. I guess the main thing I was trying to do based on the design given to duplicate... was trying to keep the background on the desktop halfway up the elements across a wider screen widths. I was trying to keep the design more consistent over the responsiveness ... Right or Wrong that was my goal

0

Please log in to post a comment

Log in with GitHub
Discord logo

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