Item match not responsive

Hello @izgaisdriznaks,

Thank you for reaching out us!

Can you apply the following CSS in WordPress Customizer (Dashboard > Appearance > Customize > CSS):

.stm_lms_question_item_match__answer, .stm_lms_question_item_match__single {
min-height: 125px !important;
}
.stm_lms_question_item_match__answer.correct:before,
.stm_lms_question_item_match__answer.incorrect:before{
top: 50px !important;
}

.stm_lms_question_item_match .stm_lms_question_item_match_row .stm_lms_question_item_match_col:first-child {
width: calc(35% - 30px);
}

.stm_lms_question_item_match .stm_lms_question_item_match_row .stm_lms_question_item_match_col:nth-child(2) {
width: calc(65% - 30px);
}

@media (max-width: 991px) {
.stm_lms_question_item_match__answers .stm_lms_question_item_match__answer .stm_lms_question_item_match__match {
color: #273044 !important;
background-color: transparent !important;
font-size: 14px;
}
}

.stm_lms_question_item_match__answer, .stm_lms_question_item_match__single {
text-align: left !important;
}

I hope it helps.

Best wishes

Hmm, this code doesn’t seem to change much. It only made the question and empty answer boxes bigger. But maybe I wasn’t clear on what I’m trying to achieve.

So the questions and answers on mobile appear in a single column like this. It is unclear what is being matched.

The results, however, appear in 2 columns like this which makes it easy to understand.

I would like the empty forms to appear in 2 columns as well so that it’s clear what it is I’m matching.

Hello @izgaisdriznaks,

To make the Item match question type appear in two columns in Mobile view as well the core templates of the LMS plugin should be customized. We created tasks for development and try to consider them in future development.

Regards