Simplequiz questionaire in a responsive layout

10 months 3 weeks ago #1 by Clemens
I am just developing my new websites with Joomla 4 and YooTheme Pagebuilder. On one page, I want to place the questionaire of SimpleQuiz module. The pagebuilder gives me the freedom, to place modules anywhere within the page layout.

The items in my quiz do not have much text and the items should be answered by choosing a value between 1 and 10. So the show up with the small slider. This is alright, when I have a single column layout like on smartphones in portrait mode. But when the quiz is shown on larger screen width / desktops, then there is a large amount of white / unused space.

I would like to have the items show up in two columns depending on screenwidth. This could normally be done easily, because there are three breakpoints for this.

My question: How can I achieve, that the items of a quiz will be shown in two columns (ideally with equal length each)?

Please Log in or Create an account to join the conversation.

10 months 3 weeks ago #2 by Christopher Mavros
Replied by Christopher Mavros on topic Simplequiz questionaire in a responsive layout
Hello Clemens and thank you for posting!

SimpleQuiz allows you to customize the look of your quiz as much as you want.
However, for such a change, you need some CSS.
One possible solution is to use the following code:
@media(max-width: 576px) { .question_wrapper { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-gap: 1em; } }
This would cause all questions to show up on two columns, on all screens with width equal or less than 576px.

Or perhaps you want something like the following, that automatically adjusts depending on the screen size:
.question_wrapper { display: flex !important; flex-wrap: wrap; }

Let me know if you need further assistance.
​​​​​​​Thanks again!

Christopher Mavros
mavrosxristoforos@gmail.com
If you like our extensions, please rate us on the JED!
The following user(s) said Thank You: Clemens

Please Log in or Create an account to join the conversation.

10 months 3 weeks ago #3 by Clemens
Hi Christopher,
thank you so much for your quick reply and for the solutions you offered me!

I have chosen the firs one with media query and it works "out of the box".

Kind regards
Clemens

PS: I have tried to answer at first via "quick reply" function. But then I cannot access the submit button, because I could not scroll the page. Using the bigreplay field here, then it works and I can scroll.

Please Log in or Create an account to join the conversation.

10 months 2 weeks ago #4 by Christopher Mavros
Replied by Christopher Mavros on topic Simplequiz questionaire in a responsive layout
Thank you Clemens. I have fixed the Quick Reply modal. (I think)

Let me know if you need any further assistance!

Christopher Mavros
mavrosxristoforos@gmail.com
If you like our extensions, please rate us on the JED!

Please Log in or Create an account to join the conversation.

Moderators: Christopher Mavros