Docs

[Chgrim]

Hi,

I am trying to get an inline button for my email subscription.

Right now I have this

http://www.topdownreviews.com/test/

Here is the code I am using

body .x-subscribe-form fields {
        display : inline-block;
	vertical-align:top;
}
.x-subscribe-form input[type="submit"] {
    background: url('http://www.topdownreviews.com/wp-content/uploads/2016/10/Submit-button-1.png') center no-repeat;
    background-size: cover;
    border: 0;
    width: 100%;
    color: transparent;
    padding: 10px 44px;
    min-width:100px;
    min-height:110px;
}

/*  email field width  */
.x-subscribe-form input[type="email"] {
    width: 100%;
}
.x-subscribe-form input[type="email"] {
    margin-top: 10px !important;
}

.page-id-1107 #x-section-2 {
    padding-top: 0 !important;
}

How do I make it so the button is inline and the same height as the enter email field?

Thanks!

[Friech]

Hi There,

Thanks for writing in! First please increase the max-width of the form so both the button and input field fits in.

http://prnt.sc/cw3m7q

Then update your custom CSS code to this:

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

.x-subscribe-form input[type="submit"] {
    background: url('http://www.topdownreviews.com/wp-content/uploads/2016/10/Submit-button-1.png') center no-repeat;
    background-size: cover;
    border: 0;
    color: transparent;
    margin-top: 0;
}

.x-subscribe-form input[type="email"] {
    margin-top: 0 !important;
}

Hope it helps, Cheers!

[Chgrim]

That worked perfectly! Thanks so much! You guys are the best 🙂

This is a little bit of an extra but I don’t suppose there is a way to make the email field slightly transparent?

http://www.topdownreviews.com/marijuana/

Thanks
Chris

[Joao]

Hi Chris,

Please add the following code to Appereance > Customizer > CUstom > CSS

.x-subscribe-form input[type="email"] {
    background-color: rgba(255,255,255,0.8);
}

Hope that helps

Joao

[Chgrim]

Thanks so much!!!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Chgrim]

Hi,

So I updated the size of the slider and my inline settings broke for the email form.

You can see here

http://www.topdownreviews.com/mattress/ how the custom submit button no longer lines up with the field.

Here is the code I am using from before.

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

.x-subscribe-form input[type="submit"] {
    background: url('http://www.topdownreviews.com/wp-content/uploads/2016/10/Submit-button-white.png') center no-repeat;
    max-width: 5px;
    border: 0;
    color: transparent;
    margin-top: 0;
}

.x-subscribe-form input[type="email"] {
    background-color: rgba(255,255,255,0.9);
    font: rgba(0,0,0,1);
    margin-top: 0 !important;
}

Thanks
Chris

[Chgrim]

One thing to note, The slider is 1920 so I had to make the text in the email form add on 36. It was so small when it was 14.

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Chgrim]

This reply has been marked as private.

[Rad]

Hi there,

Please provide the login credentials that has admin capability, or simply grant admin capability to your provided login credentials.

For the meantime, would you mind clarifying what’s the issue? The submit and field aligns on my view, and it disappears on mobile.

Thanks!

[Chgrim]

Sorry about that! I made that same account an admin.

I have attached an image of what I am seeing. The height of the field and the submit button are misaligned.

Thanks so much!
Chris

[Christopher]

Hi there,

Please update this code :

.x-subscribe-form input[type="submit"] {
    background: url(http://www.topdownreviews.com/wp-content/uploads/2016/10/Submit-button-white.png) center no-repeat;
    max-width: 5px;
    border: 0;
    color: transparent;
    margin-top: 0;
}

To :

.x-subscribe-form input[type="submit"] {
    background: url(http://www.topdownreviews.com/wp-content/uploads/2016/10/Submit-button-white.png) center no-repeat;
    max-width: 5px;
    border: 0;
    color: transparent;
    margin-top: 0;
    padding: 1px 28px 1px !important;
}

Hope it helps.

[Chgrim]

Hi!,

So I was able to tweak the numbers so that it lines up. I guess my only concern is that when I shrink my window it becomes mis-aligned at the smaller sizes. Is there any way to fix this or is it something I will just have to live with.

Thanks so much for all your help so far. You guys rock.

Chris

[Joao]

H Chris,

Please add the following code to Appereance > Customizer > Custom > CSS

input[type="submit"] {
line-height: 0.95em;
}

Hope it helps

Joao

[Author]

Posts