Checkboxes and Radio buttons no longer lined up [RESOLVED]

Get Help
, ,
1

Hi, I made this website in 2019 and everything worked ok then. However, it no longer displays radio and checkboxes with correct alignment. I’ve made no theme updates (did update Genesis Framework, however). I did update WP and plugins, including Gravity Forms.

Here’s the URL in question: https://www.evaxmaps.com/checklist/

Here’s how it should look:

Evax-Checklist
Evax-Checklist1689×3939 442 KB

I have version 2.5.16 GF
5.9.2 WP

I hope someone can give me a css hack to make this look a little better. I tried to do that but I am not good with CSS.

2

Hello. The styles are all minimized and cached as well, but it looks like your theme or another plugin is adding this rule which is causing the input to take up 100% of the width and forcing the label to the next line:

input, select, textarea {
  background-color: #fff;
  border: 2px solid #bdc3c7;
  border-radius: 3px;
  box-shadow: 1px 1px 3px #eee inset;
  color: #34495e;
  font-size: 16px; 
  padding: 16px; 
  padding: 1.6rem; 
  width: 100%;
}

The last line width: 100%; is what is messing things up. You can override that by adding this CSS to your theme (or child theme) stylesheet or via the Appearance Customizer (Appearance > Customize > Additional CSS):

body .gform_wrapper input[type='radio'],
body .gform_wrapper input[type='checkbox'] {
  width: inherit!important;
}

When I added that to your page, this is what it looked like:

1 Like
3

Thanks a bunch, you’ve saved me.

1 Like