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

Responsive mobile-first storage component

Laura 30

@lauradotcom

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


I had trouble centering the white box callout on the mobile version and can't figure out why. Is there a bug or something overriding the "margin: 0 auto" for that class that I'm not seeing?

Also the desktop version looks good to me at 1440px, but would ideally want to eliminate some of the negative space at the 1024px breakpoint so the background image comes all the way behind the content. Suggestions are welcome. Thank you!

Community feedback

Mark Mitchell 1,820

@markup-mitchell

Posted

Hi Laura,

You're using position: absolute; left: 30% on storage-callout which takes it out of the flow and prevents margin: auto from being applicable.

1

Laura 30

@lauradotcom

Posted

Ahhh thank you for pointing that out, Mark! I initially had left: 50%, thinking that should have centered the callout relative to the main container. 30% got it looking closer, then I got frustrated and tried to override it with the 0 margin.

Ultimately I got it to center by changing back to left: 50% and adding margin-left: -75px. I suspect it was having trouble centering because I'd set a min-width of 150px but not totally sure why that solution worked. I'll take it, though! :p

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