Form label with mandatory asterisk makes the line wrap misaligned...

[Christine_LeBla]

Hi,

Form field label made mandatory (asterisk icon) causes the 3rd line to misalign. First and second line wrap with correct indentation. However, 3rd wrapped line text returns back under the asterisk and not indented like the top 2 lines, and does not look good.

iPhone 13 causes this effect. Through browser tools I have created a new media query for this to target specifically 300px - 359px.

Can you please advise how I can clean this up?

I have tried this:

.mktoLabel.mktoHasWidth {
display: block;
margin: 0;
padding-left: 1em;
text-indent: -1em;
}

I do not see how I can possibly apply any <span> when HTML is not readily available for these form labels.

Please advise.

Thank you.

[SanfordWhiteman]

It’s not possible to help without a link to your page w/form.

[Christine_LeBla]

Screenshot. It's the asterisk on mandatory fields that poses this challenge. How can 3rd line and other subsequent lines get aligned correctly to follow the indentation that first and second line share:

[SanfordWhiteman]

A link to your page is necessary to suggest CSS edits.

[Dave_Roberts]

You should be able to edit the HTML of any label using the native Marketo form editor. 

For most fields, you can click the pencil icon next to the Label input at the top of the Properties list (far left). Then click the HTML icon on the toolbar to get at the HTML behind the label.

For "checkboxes" field types, there are two places to edit the HTML for a label. The label above/left of the field (yellow) can be edited in the same way shown above. The label to the right of the input (green) can be edited using the "Values" link: Edit (x)  which will pop up a modal window where you can edit the "Display Value" for all the checkboxes. This input will also accept HTML, and you may find it easier to click the "Advanced Editor" in the bottom left to show a text-based GUI when editing HTML in the Display Values.