Submitted over 4 years ago

Fylo Storage component using power of CSS grid

@akshay63

A solution to the Fylo data storage component challenge

Solution retrospective

Hi, all! This is my second pixel-perfect solution to the Frontend Mentor challenge. I have used CSS-grid. In this challenge, I learned so many things about CSS grid which are very useful and important property values such as min-content, max-content, min-max function, and auto-fit.

Well, I had a struggle styling with the dialog template and didn't do well with it. So left it simple. Any suggestions on how we can style that box and how to approach it?

Code

Please log in to post a comment

Community feedback

Kingsley Agu•285
@didyouseekyng
Posted over 4 years ago
you actually have to tweak the position property for the popup-box, here is a link to the screen shot [Link] (https://ibb.co/gt1BbvJ)
Kingsley Agu•285
@didyouseekyng
Posted over 4 years ago
Hi, Akshay

Great job done for the desktop size, but the layout is quite off on the mobile, as the popup-box is positioned to the right which is a great fit, but not on mobile, I suggest putting this particular class code inside a media query for desktop. other than that, you've done very well. .popup-box { padding: 0.8rem 2.3rem; background-color: #fff; position: absolute; top: 0; right: 3.5rem; z-index: 1; border-radius: 1rem; border-bottom-right-radius: 0; }

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