• Resolved veliute

    (@veliute)


    Hello,
    There are a few changes that I would like to make to my QSM quiz, I hope you will be able to help me out.
    Firstly, regarding the look of the test answers (Multiple choice horizontal).
    I would like to move them to the right side by 30px, or make them centered. Also, would like to change the font to Avenir and it’s size to 35pt.

    Secondly, if it is possible to change the size and color of the circle buttons for the answer to be #c7f9a6 with a black 1px border and #231f20 when hovered.

    Finally: I was able to change the look of the buttons, then they are hovered (border, font size etc.), hover the original look of them stays the same despite adding css (was able to change only the color). But I would prefer if they had rounded corners and bigger font at first (border-radius: 100px; font-size: 20px;).

    Thanks in advance!


Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi @veliute

    Can you please share the quiz link with us so I will check and help you to fix the issue.

    Regards,
    Sumit

    Thread Starter veliute

    (@veliute)

    Hi @veliute

    Sorry for delay in response.

    Thank you for sharing the quiz link with us. Our technical team is looking into it.

    I will keep you posted with further updates soon.

    Regards,
    Sumit

    Hi @veliute

    Please check below-given points regarding your issues.

    1. Firstly, regarding the look of the test answers (Multiple choice horizontal). I would like to move them to the right side by 30px, or make them centered.

    Ans: Please add the below-given custom css code in the additional css section of wordpress customizer and then check.

    .qmn_radio_answers.qmn_radio_horizontal_answers {
    margin-left: 30px !important;
    }

    1. Also, would like to change the font to Avenir and it’s size to 35pt.

    Ans: There is no Avenir font in google fonts, therefore it is not possible to provide @import CSS code to load font stylesheet.

    You need to discuss this issue with your developer only.

    1. Secondly, if it is possible to change the size and color of the circle buttons for the answer to be #c7f9a6 with a black 1px border and #231f20 when hovered.

    Ans: Please add the below-given custom css code in the additional css section of WordPress Customizer and then check.

    <span style="font-size: 14.4px;">input[type='radio']:after {
            width: 15px;
            height: 15px;
            border-radius: 15px;
            top: -2px;
            left: -1px;
            position: relative;
            background-color: #c7f9a6;
            content: '';
            display: inline-block;
            visibility: visible;
            border: 1px solid #000;
        }
    
        input[type='radio']:hover:after {
            width: 15px;
            height: 15px;
            border-radius: 15px;
            top: -2px;
            left: -1px;
            position: relative;
            background-color: #231f20;
            content: '';
            display: inline-block;
            visibility: visible;
            border: 1px solid #000;
        }</span>
    1. Finally: I was able to change the look of the buttons, then they are hovered (border, font size etc.), hover the original look of them stays the same despite adding css (was able to change only the color). But I would prefer if they had rounded corners and bigger font at first (border-radius: 100px; font-size: 20px;).

    Ans: Can you please explain more regarding this point is it related to Next. Previous. or Submit button or Radio button please confirm.

    Looking forward to your reply.

    Regards,
    Sumit

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CSS hanges’ is closed to new replies.