I have integrated a responsive template in my 3.1 joomla to display the site correctly on smartphones. However, I don't get the expected result due to the width that ARI quiz uses. I need to limit the width with no more than 300px.

I've already introduce some changes in css file in order to eliminate some elements such as status ba and the question and quiz titles. But, the width area it's still bigger than 300px.

.ari-quiz-container .aq-header
{
display: none;
}

.aq-status-panel
{
display: none !important;
}

.aq-answer-label LABEL
{
visibility: hidden !important;
}

DIV.aq-question-title
{
display: none !important;
}

I use hotSpot question type, but the widdth image is 220px, so this is not the problem. ¿what can I do?

web: www.pruebaj3.com.mialias.net/vertex/index.php/quiz
user: prueba974
password: SXWBT3uj

Hello,

Add the following CSS rule:

BODY #ariQuizContainer .aq-quizsession-container
{
min-width: 300px;
}

Regards,
ARI Soft

it doesn't seem that it works.

I've captured two screen impressions. The first one (picture 1), with the description quiz page. As you can see, it fixes well in smartphones devices. But, in the question page (picture 2), it doesn't. ¿Another idea?

image attached

It seems you added the CSS rule to an incorrect place.

Regards,
ARI Soft

I added it, but then I removed it because it didn't seem to work.

Now, I've added it again. But it is still not working