Random Quote Generator test - codepen link https://codepen.io/Petroman/pen/zYjOqeO

Random Quote Generator - codepen link https://codepen.io/Petroman/pen/zYjOqeO

I get an error message “The #quote-box wrapper element should be horizontally centered. Please run tests with browser zoom level at 100% and page maximized”.

When I measure it on screen it is horizontally centered but not vertically.
Tests passed 11 of 12.
I would appreciate some guidance here.

Hi, I just edited your post to include your link in the text of the post as it was not working (as a link) when it was just in the subject.

It is because you have body in the .hide() selector list.

I’d suggest you use animate with the opacity it also takes a callback where you can call getNewQuote.


$("#new-quote").on("click", function () {
      opacity: 0
    () => {

      opacity: 1

you should probably check the html validity as I saw some issues in the code like here:

<a href="https://twitter.com/intent/tweet" target=" _blank" id="tweet-quote" class="btn btn-sm btn-primary offset-3" lank"><i class="fab fa-twitter text-white"> Tweet quote</i></a>

(there’s a double quote after the word offset-3 then another word then a double quote all in the same tag)

Thank you for changing the link for me. I am not very familiar with how to use the system to enter the details of my problem. I corrected my code to remove error there you pointed.

1 Like

I removed the from the jquery code and it solved the problem. Now passes all 12 tests. I guess it must be the strictness of the tests which causes it to fail because if I physically measure the position in the browser it is fine?
I changed my code to use the animate function as you suggested and so everything works ok now.

thank you for your help

It is because hide sets the element to display: none which makes it have no dimensions so the test can’t measure its location in relation to the viewport.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.