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

Forum|Forum|3 years ago
February 21, 2023
3 replies
1446 views

.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.

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Dave_Roberts

New Participant

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.

SanfordWhiteman

New Participant

If you want the asterisk associated with a specific label:

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

Christine_LeBlaAuthor

New Participant

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?

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded