Responsive Images

  • Resolved Ari123

    (@ucdguy)


    3 years, 3 months ago

    Hi!

    Within a particular quiz, I would like the image widths of my questions to satisfy the following:

    Non-mobile: 40%
    Mobile: 100%

    Is there a way I can achieve this?

    I am currently setting these images to a width of 400 px, which does indeed automatically make them 100% on my mobile. However, I believe that if an image appears to be a good size on my 1080p monitor when set with a 400 px width, then it will look small on a 4K monitor of the same size, is that right?

    Thanks! ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Jasmine

    (@hyenokian)

    Hi @ucdguy,

    Thank you for the topic.

    The plugin has the Questions Image Styles option for PC.

    To find this option, please go to the Quizzes > particular quiz > Styles tab and set 40% for the Image Width option.

    See the screenshot: https://ibb.co/sgk5rdf

    Regarding the mobile, please insert this Custom CSS code to the Quizzes page > particular quiz > Styles tab > Custom CSS option.

    Then, replace YOUR_QUIZ_ID with the corresponding Quiz ID (e.g. 3). Do not delete the space after it.
    Do not forget to clear the cache afterward.

    @media screen and (max-width: 768px) {
    div#ays-quiz-container-YOUR_QUIZ_ID .ays-image-question-img img {
    width: 100% !important;
    }
    }

    Please let us know about the outcome.

    Thank you.

    Thread Starter Ari123

    (@ucdguy)

    Works perfectly, thank you for your quick and detailed reply! ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive Images’ is closed to new replies.