Trouble with a few specific CSS Styles.

Hi Angie,

I would be glad to help you with the CSS issues you have mentioned. Do you have a link to the page where you are displaying the form?

Thanks,
Evan

Hi Evan,

Yes, I didn’t give it before because I have a maintenance plug in set up, but I have deactivated it to give you temporary access:

https://seesustainableexperience.com.au/#Register_now

My problems are:
– The shadow inside the input boxes
– the check boxes – they aren’t aligned vertically with text
– Checkboxes aren’t aligned on the left
-checkboxes need space between them & Group names
– Ideally I’d like the group names to be on different lines

Hope this makes sense.
Thanks so much!

Hi Angie,

To get rid of the box shadow inside of the input box you can do :

.yks-mailchimpFormDivRowField input {
  border: none;
}

To add some spacing between the checkbox and the text next to if you can add a little margin to the right of the checkbox:

label.yks_mc_interest_group_label input {
  margin-right: 10px;
}

To vertically align the text on your site you can adjust the line height of the label wrapped around the checkbox:

.yks_mc_interest_group_label {
  margin-top: 15px; /* add a little spacing between the checkbox and the section name */
  line-height: 1;
}

To get the interest groups seperated onto different lines, you can adjust the display attribute on the interest group labels:

.yikes_mc_interest_group_checkbox, .yks_mc_interest_group_label {
  display:block;
  margin: 1em 0; /* adjust spacing between each group */
}

I’m not sure what you mean by the checkboxes aren’t aligned on the left. The checkboxes should be aligned with the left side of the input fields above it.

Let me know if that helps with styling!

Here is a Preview of what it should look like with these styles applied.

Thanks,
Evan

Thanks so much!

It is looking a lot better, but it doesn’t actually look exactly like the linked image you sent through. I have played around with a few of the numbers and settings to try and fix it but I still am having trouble –

The checkboxes are not aligning to the left side of the input fields, and I can’t for the life of my figure out why?

also the spacing between the lines of the groups/checkboxes is still very little, and no matter what I do I can’t seem to make it bigger or if it goes more spaced out the checkboxes still stay in place where they are so they no longer line up with the words…
I have also tried taking out some of the styles i have set it there incase they were conflicting but nothing seems to get the result i’m after… and the result I’m after is effectively exactly like the picture you posted up!
Thanks so much for all your help btw!
Angie

Hi Angie ,

What browser are you using? When I view your site in my ipad in safari and chrome it appears correct. It may be a browser specific issue. Have you tried other browsers?

Evan

Hi Evan,

I’m viewing from my computer and it’s consistent across Chrome, Firefox & Safari… (i’m on a mac)…

Cheers,
Angie

Hey Angie,

It looks like you forgot to change the display attribute on the labels. IT is currently set to

.yikes_mc_interest_group_checkbox, .yks_mc_interest_group_label {
  display:inline-block;
  margin: 0 5px;
}

you should change it over to

.yikes_mc_interest_group_checkbox, .yks_mc_interest_group_label {
  display:block;
  margin: 1em 0; /* adjust spacing between each group */
}

That will split the interest groups onto separate lines.

It also looks like you have left off the float: left; on the input fields. Right now you have:

label.yks_mc_interest_group_label input {
 margin-right: 10px;
}

it should be :

label.yks_mc_interest_group_label input {
 margin-right: 10px;
 float: left;
}

Evan

Hi Evan,
I just double checked and that is exactly the what’s entered into my css. And the checkboxes still display on one line and also not lined exactly up to the boxes above on the left side there appears to be a few px marging…. I have cleared my cache on all 3 browsers and this doesn’t affect it either.

This is my CSS copied exactly from my child theme the relevant code is the bottom section. It should work hey?:

.yks_mc_interest_group_label {
font-size: 18px;
font-weight: 300;
text-transform: Initial;
color: #507288;
margin-top: 30px; /* add a little spacing between the checkbox and the section name */
  line-height: 1;
}

label.yks_mc_interest_group_label input {
  margin-right: 10px;
 float: left;
}

.yikes_mc_interest_group_checkbox, .yks_mc_interest_group_label {
  display:block;
  margin: 1em 0; /* adjust spacing between each group */
}

Hi BoldbyDesign.

On line 82 of your child theme style sheet try sticking an !important on display: block

.yks_mc_interest_group_label {
font-size: 18px;
font-weight: 300;
text-transform: Initial;
color: #507288;
display: block !important;
margin-right: 30px;
margin-top: 30px; /* add a little spacing between the checkbox and the section name */
  line-height: 1.5;
}

That should get each checkbox item on its own line.

Hi BoldbyDesign,

It looks like things have been resolved on your site, from the looks of it. The check boxes now reside on separate lines, which is what you were after.

If your having any other issues or difficulties please reach out and let us know, and we’ll get to helping you ASAP.

Thanks,
Evan