SOLVED

Label not aligned with checkbox 2.0 form

Go to solution
Gina_Powers
Level 2

Label not aligned with checkbox 2.0 form

I am using the Marketo 5A guided landing page with a form in the footer section. I have no custom CSS associated with the form. I want to understand why the check boxes are not aligned with the display label. I looked at the CSS in the landing page code, but I don't see what is causing the issue. Can I put some custom CSS in the form to correct this? The form does not behave this way when I use a different LP template.  The field type is "Check boxes" and I'm using the display value associated with the checkbox.

pastedImage_0.pngpastedImage_4.pngpastedImage_2.png

Tags (2)
1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Label not aligned with checkbox 2.0 form

You're overriding min-height for <INPUT> in a local stylesheet (see the selector #f input).

You can undo this for checkboxes:

#f input[type="checkbox"] {

    min-height: 0;

}

But I suspect whoever put this together wasn't thinking about checkboxes as <INPUT> elements, so there will likely be other things to overcome.

View solution in original post

9 REPLIES 9
Anonymous
Not applicable

Re: Label not aligned with checkbox 2.0 form

hmmm.. i tried but could not reproduce this.  Have you tried looking at the font size, field width and label alignment?

Gina_Powers
Level 2

Re: Label not aligned with checkbox 2.0 form

The CSS limits the form to 350 so I've made sure my fields are no wider than 350. I can't find the font for the form in the CSS but it displays much larger than what I have on the form (13). I cannot find the label alignment in the CSS, but I could tell by the behavior of the landing page that the CSS likes 1 field per line. So I wondered if the issue stems from the field having both a label and a box.

SanfordWhiteman
Level 10 - Community Moderator

Re: Label not aligned with checkbox 2.0 form

You need to provide a link to a URL and the browser version + OS in which you are seeing this problem.  We can't troubleshoot screenshots!

Gina_Powers
Level 2

Re: Label not aligned with checkbox 2.0 form

landing page: Login | Marketo and

form Login | Marketo.

I am seeing this in Firefox 47.0.1, Chrome 51.0.2704.106  and IE11.

SanfordWhiteman
Level 10 - Community Moderator

Re: Label not aligned with checkbox 2.0 form

Those are private URLs in your instance. Need something I can access.

Gina_Powers
Level 2

Re: Label not aligned with checkbox 2.0 form

Ok. We did publish the page this morning.

https://BusinessSolutions.sprint.com/Healthcare-Webinars.html

SanfordWhiteman
Level 10 - Community Moderator

Re: Label not aligned with checkbox 2.0 form

You're overriding min-height for <INPUT> in a local stylesheet (see the selector #f input).

You can undo this for checkboxes:

#f input[type="checkbox"] {

    min-height: 0;

}

But I suspect whoever put this together wasn't thinking about checkboxes as <INPUT> elements, so there will likely be other things to overcome.

View solution in original post

Gina_Powers
Level 2

Re: Label not aligned with checkbox 2.0 form

Thank you so much. This is a Marketo guided landing page that I downloaded into our instance. We placed our analytics and brand fonts on it but that is the only change made.

SanfordWhiteman
Level 10 - Community Moderator

Re: Label not aligned with checkbox 2.0 form

The "whoever" might not be you but the point stands.   That block of CSS is too general IMO. <INPUT>s like radios and checkboxes typically need more delicate care.