target and control positioning for one of the asterisks in a form...

[Christine_LeBla]

.mktoForm .mktoAsterix

Need to target this for 480px and below media query. I am able to do that, but how can I target just one instance of the asterix where the positioning is not in good alignment? All others are fine, but next to fieldtype of checkboxes it's floating too far above the text label.

How can I directly target that one single instance to control? There is only an ID associated with the label text by it called: LblhotButtons

<label for="hotButtons" id="LblhotButtons" class="mktoLabel mktoHasWidth" style="width: 600px;"><div class="mktoAsterix">*</div><div class="mktoFieldDescriptor mktoFormCol">

Any recommendations for injecting more custom CSS into the form? It appears a bit sloppy on mobile phone view when the asterix is floating above the label by about 15px.

Thanks.

[Christine_LeBla]

OK, this seems to be an alright work-around for 480px screen and lower.

.mktoForm .mktoAsterix {
position: absolute;
left: -10px;
}

Unless you have a better method?

[SanfordWhiteman]

If you want the asterisk associated with a specific label:

.mktoForm label[for="hotButtons"].mktoLabel > .mktoAsterix

[Dave_Roberts]

Are you able to provide a link to a live page with this form on it?

I might be able to help you get some CSS in place that should fix this issue for this one, and maybe even for all the required asterix so you don't run into this sort of thing in the future. If you're in a spot where you've gotta override something for one of them, chances are there's a better way to setup the CSS you do have in there to be able to handle different situations.