Random Quote Generator Layout Test not passing

Hi there,

I finished the project using React, a JSON source file on GitHub and flexbox styling for the layout. The tests only run in Firefox (Chrome is throwing a Mocha div error which I also found in the forum to be common).

My project is here

Problem is:
11 tests pass but the layout test does not. It says:

  1. The #quote-box wrapper element should be horizontally centered. Please run tests with browser’s zoom level at 100% and page maximized.

I tried a lot to find out why this last test does not pass, the element seems centered to me. I’d be happy if you could have a look. Thanks a lot!

If you test in Firefox: You might have to run the tests a second time in case they get stuck after 8 tests in the first run :slight_smile: When tests runs first there seems to be an issue with the response times although the app does not seem to have a problem.

If you search for “mocha div” in the forum search and read through the 4th result, you might find a solution to this particular issue.

Yes, the tests will work in Chrome (as they do for me), but there is something preventing them for working on your browser.

For your layout problem…
Removing width: 100%; from body fixes it.

Yep, thanks for the quick answer. I did, but the problem I have with my project itself is the layout test. Sorry I didn’t be clear enough in my question :slightly_smiling_face:

Thank you so very much! That did the trick indeed.

But why does it fix the problem? I will help the user to understood what problem having the width at 100% was causing.

1 Like

Because it has display: flex already and stretches (?) … I added a comment to the CSS code