Alignment of form checkbox

[nicolasdenutte]

Hello, 

I'm trying to create a form on a landing page that is divided into two columns. On the left column, I have added a form with a multiple checkbox field. I noticed that the checkboxes are aligning with the text when the label text spans two lines. I've tried to find how I could change the stylesheet to make the label text align but I'm not sure how to do it. Any recommendations? 

I'm not a developer but to me,it seems that this has something to do with the fact that the multiple checkbox element is a list input? Is there a way I can make CSS changes in the style sheet that would make the text on the second line (see screenshot above) align with the text on the first line next to the checkbox? 

/* Inputs - Checkbox/Radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list:not(.no-list) label {
  color: #FFFFFF;
}

.inputs-list > li {
  display: block;
  margin: 0.7rem 0 0.7rem 0.7rem;
  padding: 0;
  width: 100%;
}

input[type=checkbox],
input[type=radio] {
  border: none;
  cursor: pointer;
  height: auto;
  line-height: normal;
  margin-right: 0.35rem;
  padding: 0;
  width: auto;
}

Thank you for your recommendations/help.

Best,

Nicolas

[Jake_Lett · Accepted solution]

Hi Nicolas,

Your code is pretty close. Could you provide a link to a live page? I think I can match your html code based on your CSS but the link would help. What you need to do is add a negative margin on the input and then rebalance the text with left padding. 

.inputs-list > li {
  display: block;
  margin: 0.7rem 0 0.7rem 2rem;
  padding: 0;
}

input[type=checkbox],
input[type=radio] {
  border: none;
  cursor: pointer;
  height: auto;
  line-height: normal;
  margin: 0 0.35rem 0 -1.4rem;
  padding: 0;
  width: auto;
}

Codepen demo: https://codepen.io/JacobLett/pen/RwaOKga

---

Jacob Lett

Website Designer & Developer

---

Located in Michigan, USA

View my HubSpot Templates ›

[nicolasdenutte]

Hello Jacob, 

Thank you for jumping in. 

Link to the page: 

https://go.appscale.com/lowering-my-aws-bill-2

Best,

Nicolas

[Jake_Lett]

It looks like you figured it out. Did you try the code I supplied or did you do something different?

[nicolasdenutte]

Hello Jacob, 

I just figured it out 5 minutes ago using your code snippet. Thanks a lot for this, super helpful 🙂 

Best,

Nicolas