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
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile First with Flexbox using BEM.

Leo Garciaβ€’ 90

@leogarcialp

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


Hello, it's me again :D

This was a hard challenge for me, and I noticed that I have a couple of issues. But the main problem for me was the 185 GB left kind of pop-up over the right top corner in desktop. I'm not able to positiong on the same place in every resolution. As you can see it moves depending on the resolution.

Community feedback

Cianβ€’ 80

@ciandm

Posted

Hi Leo,

To position that element properly on desktop, you can switch your absolute positioning from left to right. This will work in the same way your left works, however it will be positioned from the right of the storage__info container so it will remain in place even when you resize the screen. So your code will look like the below:

@media (min-width: 1200px) {
  .storage-left {
    left: initial; // reset the left value
    right: 3rem; // this is the value of the padding on the right of the container
  }
}

Hope that helps you.

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