Title: CSS hanges
Last modified: April 10, 2023

---

# CSS hanges

 *  Resolved [veliute](https://wordpress.org/support/users/veliute/)
 * (@veliute)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/css-hanges/)
 * 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)

 *  [sumitsanadhya](https://wordpress.org/support/users/sumitsanadhya/)
 * (@sumitsanadhya)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/css-hanges/#post-16643763)
 * Hi [@veliute](https://wordpress.org/support/users/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](https://wordpress.org/support/users/veliute/)
 * (@veliute)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/css-hanges/#post-16643863)
 * Sure,
   [https://infantilizacija.wpcomstaging.com/2023/03/26/testas-cia/](https://infantilizacija.wpcomstaging.com/2023/03/26/testas-cia/)
 *  [sumitsanadhya](https://wordpress.org/support/users/sumitsanadhya/)
 * (@sumitsanadhya)
 * [3 years, 1 month ago](https://wordpress.org/support/topic/css-hanges/#post-16660654)
 * Hi [@veliute](https://wordpress.org/support/users/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
 *  [sumitsanadhya](https://wordpress.org/support/users/sumitsanadhya/)
 * (@sumitsanadhya)
 * [3 years, 1 month ago](https://wordpress.org/support/topic/css-hanges/#post-16665452)
 * Hi [@veliute](https://wordpress.org/support/users/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;}
    2. 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](https://wordpress.org/support/users/import/) CSS code to load
   font stylesheet.
 * You need to discuss this issue with your developer only.
    3. 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.
 *     ```wp-block-code
       <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>
       ```
   
    4. 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.

 * ![](https://ps.w.org/quiz-master-next/assets/icon-128x128.png?rev=3158087)
 * [Quiz and Survey Master (QSM) - Easy Quiz and Survey Maker](https://wordpress.org/plugins/quiz-master-next/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/quiz-master-next/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/quiz-master-next/)
 * [Active Topics](https://wordpress.org/support/plugin/quiz-master-next/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/quiz-master-next/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/quiz-master-next/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [sumitsanadhya](https://wordpress.org/support/users/sumitsanadhya/)
 * Last activity: [3 years, 1 month ago](https://wordpress.org/support/topic/css-hanges/#post-16665452)
 * Status: resolved