[thuynh06Participant]

How do I get the title of the form to be inline with the inputs instead of above? My site is http://www.thefitasianman.com and I want the form to look more like the one on http://www.marieforleo.com.

Also, is there a way to make the title text of the form smaller?

Thanks!

[RadModerator]

Hi there,

Add this css at Admin > Appearance > Customizer > Custom > CSS,

.x-subscribe-form-108 h1 {
    color: #ffffff;
    display: inline-block;
    line-height: 1.8em;
    margin-right: 5px;
    font-size: 1.4em;
}

You may change font size and line height accordingly to maintain vertical space alignment.

And this one for the button,

.x-subscribe-form-108 .x-subscribe-form input[type="submit"] {
    line-height: 0.75em;
    padding: 0.73em 1.125em 0.813em;
}

Cheers!

[MrsXParticipant]

deleted

[MrsXParticipant]

Hello dear staff,

I’m looking to place a horizontal optin underneath my header photo on my main page. And I don’t want all my other optin forms to be horizontal. And I don’t want them necessarily in the footer. Any thoughts?

Am I right in understanding that the following quote is only generating a horizontal optin in the footer? (I’m not looking for that)

You can then replace the code under Custom > CSS in the Customizer with this.

body .x-subscribe-form fieldset {
display:inline-block;
vertical-align:top;
}

body .x-subscribe-form fieldset input {
margin:0 !important;
}

body .x-subscribe-form {
width:100%;
max-width:100% !important;
text-align:center;
}

Am I right in understanding that the following quote is only generating a horizontal optin on the home page? Right under the photo or where-ever I place the form? Because I tried it and it didn’t work. (So I’m taking this code back out of the CSS)

.home .x-subscribe-form {
max-width:100%;
}

.home .x-subscribe-form fieldset {
display: inline-block;
vertical-align: top;
}

.home .x-subscribe-form input[type=”submit”] {
margin-top:0;
max-height: 47px;
}

.home #x-section-4 .x-section {
padding:0;
}

[ZeshanMember]

Hi @mrsx,

For #1: No, this CSS code will be applied anywhere in page throughout the site.

For #2: Yes, this CSS code will only be applied on the homepage.

If you want to target one specific form, you can use its ID in the CSS.

Thank you!

[MrsXParticipant]

Thanks Staff

For #2: Yes, this CSS code will only be applied on the homepage.

If you want to target one specific form, you can use its ID in the CSS.

How would that look in the css code?

[Rue NelModerator]

Hello There,

Please use this code instead by adding the following css code in the customizer, Appearance > Customize > Custom > CSS

.page-id-3034 #x-content-band-2 .x-subscribe-form fieldset,
.page-id-3034 #x-content-band-3 .x-subscribe-form fieldset {
  display:inline-block;
  vertical-align:top;
}

.page-id-3034 #x-content-band-2 .x-subscribe-form fieldset input,
.page-id-3034 #x-content-band-3 .x-subscribe-form fieldset input {
  margin:0 !important;
}

.page-id-3034 #x-content-band-2 .x-subscribe-form,
.page-id-3034 #x-content-band-3 .x-subscribe-form {
  width:100%;
  max-width:100% !important;
  text-align:center;
}

It should look like this in your site: http://prntscr.com/a2lwbu

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Author]

Posts