Alignment issues with contact form items using Jetpack, radio and checkboxes

[sprovenza]

Hi, I’m using the Jetpack plugin with the Alyeska WP theme to create contact forms. The checkboxes and radio buttons do not line up with the labels. I don’t have this problem when I use the plugin with other WP themes. What should I do in the CSS to fix?

Here’s an example:

http://fabulouswomen.tv/vendor-application-retail-thursday/

Thanks for your help!
Shelley

Topic

[Jason Bobich]

Hello Shelley,

Try this from your child theme’s style.css —

.contact-form label.checkbox .checkbox, 
.contact-form label.radio .radio {
  display: inline;
}

[sprovenza]

Hi Jason, thank you of your help! That worked except when I add styling to the input so all the text fields are 100% wide. Then it goes back to the way it was.

[Jason Bobich]

Can I see an example?

[sprovenza]

Hi Jason,

My client is reviewing the site right now, so I don’t want to put in the code that will mess up the alignment again. But here’s the code I used:

.contact-form input,
.contact-form textarea {
width: 100%;
}

It made the text boxes 100% wide. The problem is that it messes up the alignment, and it also makes the submit button 100% wide.

[Jason Bobich]

A checkbox and submit button are inputs, so your general styling on inputs is going to style them to be 100%, as well.

is this what you’re trying to do?

.contact-form input[type=email], 
.contact-form input[type=text],
.contact-form textarea {
  width: 100%;
}

[sprovenza]

YES!!! Thank you so much!!! And thanks for your quick responses. 🙂

[sprovenza]

One more thing … I looked at the documentation but I can’t seem to figure out how to insert a YouTube video into a post. The YouTube embed code does not work. My client used the regular share link: http://youtu.be/cCTwoVtwj5w
but the video is way too large in the post. I created a video slider, but I don’t know how to insert it into the post.

Here’s the page:
http://fabulouswomen.tv/fabulous2015news/

[sprovenza]

Hi again, never mind. I figured it out. I just pasted the short code from the video slider. Next step is to see how that translates in MailChimp. 🙂

[Jason Bobich]

In the theme, we have a filter that adjusts when you insert a video, and allows the video to be responsive within your site. However, JetPack also has some kind of feature that for videos, which interferes with this. You can simply put the URL to the YouTube page in your post — which would be https://www.youtube.com/watch?v=cCTwoVtwj5w — but you need to disable whatever video module JetPack has.

[sprovenza]

Thank you, that worked. I deactivated the JetPack “shortcode embed” module.

[Author]

Replies