Quiz answer lower container jumping

Resolved stephenbolles
(@stephenbolles)

11 months, 2 weeks ago

This plugin presents well on desktop. On iPhone the answer options container jumps up and resets continually. Have not tested on Androids. Please help!

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Support Jasmine
(@hyenokian)

11 months, 2 weeks ago
Dear @stephenbolles,

Thanks for the topic.

The issue you are facing seems to occur only on iOS devices, likely due to the specific structure of the system and the theme being used.

Our Dev Team has written a new CSS code to resolve this issue.
Please take this Custom CSS code and insert it into the Quizzes > particular quiz > Styles tab > Custom CSS option.

Then, replace YOUR_QUIZ_ID with the corresponding Quiz ID (for instance, like this: #ays-quiz-container-3).
Do not delete the space after it.
Do not forget to clear the cache afterward.

The code:
```
#ays-quiz-container-QUIZ-ID .ays-quiz-answers {
  min-height: 100px !important;
  max-height: 100dvh !important;
  overflow-anchor: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  scroll-margin-top: 0 !important;
  scroll-padding-top: 0 !important;
  will-change: auto !important;
}

#ays-quiz-container-QUIZ-ID .ays-quiz-answers * {
  animation: none !important;
  transition: none !important;
}
```
After saving the changes, please clear the caches and try again with different browsers and with an incognito mode.

Please check this and let us know whether the problem has been resolved or not.

Thank you.
Thread Starter stephenbolles
(@stephenbolles)

11 months, 1 week ago

Thank you for your work and prompt response.
I am not seeing the nested CSS options cited above.
This is what I see in the WordPress Dashboard/QuizMaker:

…and this is what I see in the Plugin file editor:

I assume I’m looking in the wrong place, or to follow your instructions I need to do a paid upgrade?

Appreciate any direction you can provide.

Many thanks…..

Plugin Support Jasmine
(@hyenokian)

11 months, 1 week ago

Dear @stephenbolles,

Thanks for the reply.

Apologies for the late response – we do not work on weekends.

Please note that the screenshots you have provided do not open:

View post on imgur.com

If we understood correctly, you did not find the place to add the custom code.

If so, then please navigate to the Quiz Maker plugin > Quizzes > your particular quiz.

View post on imgur.com

Then go to the Styles tab.

View post on imgur.com

Scroll till the very end of the page, where you would see the ‘Custom CSS’ field.

View post on imgur.com

Here you can place the code provided in the previous reply, make sure to follow the instructions provided there as well regarding the code placement.

The ‘Custom CSS’ field is available in the Free version of the plugin.

If you meant something else, please clarify your request so that we can understand your question correctly and guide you accordingly.

Thank you.

Plugin Support Jasmine
(@hyenokian)

11 months ago

Dear @stephenbolles,

We’re closing this ticket for now as we last heard from you 1 week ago.
If the query is unresolved, drop us a line and we’ll get back to you at the earliest and the ticket will be re-opened.

For a new query, feel free to open a new topic. Our Customer Care Specialists will be happy to help you.

Thank you.

Thread Starter stephenbolles
(@stephenbolles)

11 months ago

Apologies; missed your latest response.

All works well. Many thanks! Hope this is included in an update so I don’t have to add it to every quiz my client makes. But many thanks.
Plugin Support Jasmine
(@hyenokian)

11 months ago
Dear @stephenbolles,

Thanks for the reply.

If you want the change to be applied to all quizzes, please navigate to your Theme and place the below code into the Additional CSS field.

See the screenshots below:

View post on imgur.com

View post on imgur.com

View post on imgur.com

The code:
```
div.ays-quiz-container[id^="ays-quiz-container-"] .ays-quiz-answers {
  min-height: 100px !important;
  max-height: 100dvh !important;
  overflow-anchor: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  scroll-margin-top: 0 !important;
  scroll-padding-top: 0 !important;
  will-change: auto !important;
}

div.ays-quiz-container[id^="ays-quiz-container-"] .ays-quiz-answers * {
  animation: none !important;
  transition: none !important;
}
```
This way the code will affect all quizzes, and will not be lost when you update to newer versions.

If you have any other questions, feel free to open another topic.

Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Quiz answer lower container jumping’ is closed to new replies.