@andrewlmacaulay,
Sorry for the late reply I had an issue with my emails not showing me all of these tickets! If you’d like to align a checkbox with the bottom of text there is a CSS property that you could use.
I see in your theme’s stylesheet that text boxes are styled with the following:
display: inline-block;
margin-right: 0.22222222em;
padding: 0;
position: relative;
top: -0.16666667em;
This top property is controlling your checkbox position. We can override that but another thing you should know is that a checkbox is different in each browser. If you look in Chrome, Firebox, IE, Opera etc. you’ll see they’re all slightly different.
This article by Mozilla can show you how css could be interpreted differently for each browser for inputs. This doesn’t mean you can’t style the checkbox, it just means you’ll have to work at it a little bit to make sure its looking good in all the major browsers.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms
The CSS property that could help you is:
vertical-align: text-bottom;
With this property you can set the bottom to align with the texts bottom. Most people opt for vertical-align: middle; because text-bottom accounts for letters which hang like y or g. The text bottom is flush with the lowest hanging letter.
I was playing with your css and it seems like you could just adjust the top: -1px; and that would set your checkbox where it needs to be.
If you’re not sure how to add custom css you can use a plugin.
https://www.ads-software.com/plugins/custom-css-js/
The selector you could use would be:
label.yikes-mailchimp-eu-compliance-label > input[type=checkbox] {
top: -1px;
}
You can also add this through the Customizer in WordPress. If you’re looking at your website while logged in just click Customize in the WordPress toolbar.
If you’re in the admin you can go to Appearance > Customizer. Once you’re in the customizer you’ll see that there is a section for Additional CSS that you can add to your theme.
Just copy that code in there and watch your checkbox change as you manipulate it. Change the number and remember that you can use a percetage for the number like -1.00023px if you wanted to get that fine grain.
Best advice is just to open your site up in a few browsers and see what adjustments work best for all browsers.
You can also use your browsers developer tools to play with the styling. In most major browsers you can right click and choose Inspect and you’ll see the code for the website. Just right click on the checkbox and inspect. You’ll see all of those styles I listed above. Manipulate them change the numbers see what everything does and you’ll be able to have it looking exactly how you like.
Let me know if you have any questions I have my notifications for these posts fixed!
Cheers,
Freddie
