CSS to Remove the "*" for the required question

[adithya.s]

CSS to Remove the "*" for the required question :

.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_cl_survey_qstn h1.required p:last-child::before, .surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_cl_survey_qstn h1.required span:last-child::before
{
visibility:hidden;
}

[Brent]

This CSS removes the asterisk but hasn't moved the remaining text to the left like the example shows it should.

This is the CSS I've added:

.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_cl_survey_qstn h1.required p:last-child::before, .surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_cl_survey_qstn h1.required span:last-child::before
{
visibility:hidden;
}

This is what is shown in the preview:

How do I fix this?

Thanks!

[Venkata_Abhijith]

Hi Brent,

I appreciate your reaching out.

In this case, can we please remove the CSS and try disabling the "Indicate Mandatory Questions" from "Build--Design--Indicate Mandatory Questions"

Cheers,
M. Venkata Abhijith

[Brent]

Thanks Venkata. That fixed it.

[info2]

@adithya.s

CSS to Remove the "*" for the required question :

.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_cl_survey_qstn h1.required p:last-child::before, .surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item .ss_cl_survey_qstn h1.required span:last-child::before
{
visibility:hidden;
}

Your CSS code attempts to hide the "*" symbol for required questions in a survey form. However, it seems there might be a slight issue with the specificity of your selector or the structure of the HTML elements. Here are a few suggestions to refine your code:

1. Check Selector Specificity:

Ensure that your CSS selector has enough specificity to target the desired elements accurately. If necessary, you can add more specific class or ID selectors to the beginning of your rule.

2. Verify HTML Structure:

Double-check the HTML structure of your survey form elements to ensure that the classes (ss_cl_survey_qstn_item, ss_cl_survey_qstn, etc.) and elements (h1, span, etc.) are correctly nested as per your CSS selector.

3. Adjust Visibility Property:

Instead of using visibility: hidden; which hides an element but leaves space for it, you might consider using display: none; to completely remove the "*" symbol for required questions.
Here's an example of how you might adjust your CSS code:

.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item.required h1 p:last-child::before,
.surveysparrow-survey-container--classic-form .ss_cl_survey_qstn_item.required h1 span:last-child::before {
display: none;
}
This code assumes that the " symbol is generated using a pseudo-element like:: before. Adjust the selectors as needed based on your actual HTML structure and styles. Testing the updated code in your environment should help verify if the "symbols are successfully removed for the required questions in your survey form.