Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
1

Tell us what’s happening:

Functionally and aesthetically, I’m pleased with my project, but even thou the wrapper #quote-box looks centered to me, it fails the CSS tests. It passed the test originally, but once I played a bit more with the CSS it started failing. I assume it might have been when I made the wrapper a flexbox, or when I took the author text off-center. I spent some time troubleshooting but since I don’t know specifically what the tests are looking for, I’d like to hear if there’s anything basic I’m missing here.

Thank you for your help, and lasjorg if you see it - I got React/Redux on the bag now :slight_smile:

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0

Challenge Information:

Front End Development Libraries Projects - Build a Random Quote Machine

2

I just ran the program and everything passes on CodePen and the link works as well on FCC. You can mark this solved if that is the case.

1 Like
3

Hm, that’s interesting. I tested a few more times in my browser, and realized that horizontal center test fails when the view has the editor on the left side, but passes if I have the editor on top. So quirky :grin:

Either way, thank you for checking it out for me. Not sure if it’s a matter of changing how the test looks at it, or a recommendation to use the editor on top before running the tests, but I assume there’s a way of avoiding this type of situation.

1 Like
4

As long as #quote-box is full width, it can’t be centered. It is the element that needs to be centered, not just its content. Give it a max-width and an auto margin to center it.

1 Like