Expand the Button width

[Razia]

Razia

October 12, 2019 at 10:53 am

Hi Ben,

The answer choices in my quizzes are of “Button” type and the width of these buttons vary with their text which looks like this. I want to have wide buttons with equal width, as shown in the attached image.

Apparently, the following code does give me the desired results because it not only makes the buttons wide but also are centrally aligned.

.quiz-form .watupro-question-choice label {
display: block;
flex-grow: 2;
padding: 10px 5px;
}

.quiz-form .watupro-question-choice {
display: flex;
align-items: center;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.quiz-form .watupro-question-choice input[type='button'] {
margin: 5px;
}

When I apply the code, it gives me the desired width of the buttons wherever i need, but it breaks one of my other quiz which reveals instant result to the user if his choice was right or wrong. The above code stops the quiz to show the instant result of each question to the user.

Please advise how to achieve the desired width of the buttons without breaking the functionality of the quiz, which reveals the result instantly.

The code of the theme, my quizzes are using, can be seen here.

• This topic was modified 6 years, 6 months ago by Razia.