[CCDCParticipant]

Hi, I am SO CLOSE to getting this dang site done- I just can’t get the mail sign up forms to align properly. I have tried every combo of code mentioned in the forums, and I’ve edited and written my own with no luck.

I need each mail form to be aligned horizontally, and I’d like the title text, inputs, and button and to be centered vertically. I am 2 weeks past the promised launch date for this site and need to get this fixed and I am just stumped!Can you help please? 🙂

The forms I need aligned are styled in the style.css of my child theme beginning on Line 116 and commented with descriptive titles:

Optin Mail Forms = ‘global’ settings

Gold Home Contact Form – the one on the home page below the 3 square image row.

Gold Entrepreneur Contact Form – found on studiosolandco.com/entrepreneur mid-way down the page below the photo of the woman.

Blog Landing Page black bar form – found on studiosolandco.com/blog below the header image. I’d like the the text and buttons all on one line and centered vertically in the black bar with 10px padding on top/bottom.

Blog Post Purple Opt In – found on all blog post pages below the comment section.

[CCDCParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in.

Add this css as well,

.x-subscribe-form input[type="text"], .x-subscribe-form input[type="email"] {
  margin-bottom: 0;
}

This is common css among forms. So it should fix all other forms.

Hope this helps.

[CCDCParticipant]

nope. no change.

[Rue NelModerator]

Hello There,

Sorry if it didn’t worked out for you. Please try these codes instead,

.page-id-59 .x-subscribe-form fieldset{
    padding-top: 20px;
}

body .x-subscribe-form fieldset {
  display: inline-block;
  vertical-align: top;
  padding-top: 50px;
  width: 120px;
}

.x-subscribe-form input[type="text"], 
.x-subscribe-form input[type="email"],
.x-subscribe-form input[type="submit"] {
  width: 100%;
  margin-top: 0;
  margin-bottom: 1.25em;
  font-size: inherit;
  height: 1.5em;
  border-radius: 0;
  display: inline-block;
  vertical-align: top;
}

Please let us know if this works out for you.

[CCDCParticipant]

The Submit button is aligned lower than the name and email field. The text inside the button is aligned too low and cut off. How do I get it all centered together?

These are the issues I’ve been running into over and over and over and over and over……… hence the call for help! so frustrating.. I need to get better at CSS!

[CCDCParticipant]

I really wish we could copy and edit the Sass files in the child theme instead of using old school CSS… I would be able to see what is conflicting much easier! I LOVE Sass 🙂

[Rue NelModerator]

Hello Again,

There are css codes that prevents from taking in effects because they are dynamically generated by X theme itself with styles from the customizer and you have added the css in your child theme’s css which is called before the X theme css output. and it also applies to the form. All we can do is override those with parent class containers. Please try this code in your child theme’s style.css instead

.x-integrity.page-id-59 .x-content-band .x-subscribe-form fieldset{
    padding-top: 20px;
}

.x-integrity .x-content-band .x-subscribe-form fieldset {
  display: inline-block;
  vertical-align: top;
  padding-top: 50px;
  width: 120px;
}

.x-integrity .x-content-band .x-subscribe-form input[type="text"], 
.x-integrity .x-content-band .x-subscribe-form input[type="email"],
.x-integrity .x-content-band .x-subscribe-form input[type="submit"] {
  width: 100%;
  margin-top: 0;
  margin-bottom: 1.25em;
  font-size: inherit;
  height: 1.5em;
  border-radius: 0;
  display: inline-block;
  vertical-align: top;
}

If you are comfortable with SASS and would like to check it out, you can find it in /x/framework/scss/ folder.

Please let us know how it goes.

[CCDCParticipant]

Would it be more effective to put the custom CSS into the CSS box at the bottom of the Customizer menu?

The last solution re-formats my Contact Form 7 fields and I need those to stay as they were:

.wpcf7-form-control.wpcf7-submit {
    font-family: 'lato' sans-serif;
     color: #3d3a68 !important;
     width: 20%;
    height: 2em;
    vertical-align: middle;
  box-shadow: none;
  border-radius: 0;
}

.wpcf7-form textarea {
  background-color: #F1f2f2;
  border: 0px; 
  border-bottom:1px solid #505050;
  box-shadow: none;
  border-radius: 0;

}

.wpcf7 input[type="text"], input[type="email"] {
  background-color: #F1f2f2;
  border: 0px; 
  border-bottom:1px solid #505050;
  box-shadow: none;
  border-radius: 0;

}

Now the blog page is displaying all wonky! I didn’t even mess with any of that code. ARG! I wish I had this in GIT… :/ I think I’ll just put my original CSS back in there and figure something else out with the contact form button alignment.

thanks for trying so hard to help!! You guys go above and beyond for sure. much appreciated.

[ChristopherModerator]

Hi there,

No doesn’t matter where you put this CSS inside your style.css file or custom css inside customizer.

Thanks.

[CCDCParticipant]

This reply has been marked as private.

[CCDCParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

I’m not sure how they used to look, did you add any custom CSS? if so please check your CSS and make sure you open/close curly brackets correctly.

Please clarify more and provide us with some screen shots.

Please check the screen shots :

Thanks.

[CCDCParticipant]

All Clear. good to go.

THANK YOU!!!

[ThaiModerator]

You’re most welcome.

[Author]

Posts