eNews Extended Plugin & eleven40 Pro – Submit button + Email adress in same line

[markmaslow]

Dear all,

I use the Genesis eNews Extended Plugin in the Footer Widget Area of the eleven40 Pro Theme.

Since I updated from eleven40 --> eleven40 Pro, the "Submit button" slipped into a new line and therefore takes up a lot space.

For the previous eleven40 Theme, I managed to get the button next to the imput field (78% width input vs. 22% button).

Since, I'm no CSS pro, I currently lost how to do that for the new theme (eleven 40 pro).

This is, what is currently in my style.css

/* Genesis eNews Extended
--------------------------------------------- */

.enews-widget input {
	margin-bottom: 16px;
	margin-bottom: 1.6rem;
}

.enews-widget input[type="submit"] {
        width: auto;
        display: block;
        margin: auto;
}

I would be more than happy if you could help me get the button one line above as in the tutorial for the Minimum 2.0 theme:

http://www.brandonkraft.com/uploads/enews-minimum-style-go.png

Thanks so much in advance!

Regards,
Mark

http://www.marathonfitness.de

[Anita]

Mark, is this for your marathonfitness.de website or a different website? If different, please post the link.

---

Love coffee, chocolate and my Bella!

[markmaslow]

Thanks for your reply!

This is for http://www.marathonfitness.de.

[Anita]

Try adding the float, margin and width the way I have it here. I think the text below it might go a little wonky, but we can see after you add it.

.enews-widget input {
margin-bottom: 16px;
margin-bottom: 1.6rem;
width: 45%;
float: left;
margin-right: 5px;
}

---

Love coffee, chocolate and my Bella!

[markmaslow]

This is great stuff, Anitac.

Yeah, we're getting closer... Now, the optin-boxes don't take that much space anymore.

What I would love, to change is, to have the first box take up a whole line and the second one (the one with the email address) ca. 70% and the button right next to it on the right.

Any ideas?

Thanks for your help!

[Anita]

It's close. I had to redo the code so match this up with what you have. The bottom text seems to be rendering before the submit button. I think the only way to get the submit to line up next to the second field is to remove the bottom text.

.enews-widget input {
float: left;
margin-bottom: 1.6rem;
margin-right: 5px;
width: 200px !important;
}

.enews-widget #subbox1 {
float: left;
margin-bottom: 1.6rem;
margin-right: 5px;
width: 350px !important;
}

.enews-widget input[type="submit"] {
display: block;
float: right;
margin: auto;
width: auto;
}

---

Love coffee, chocolate and my Bella!

[markmaslow]

You are fantastic! I got it!

Entering your code made the layout appear ALMOST as I desired.

I tried a few tweaks and now it's perfect.

This is the final solution:

.enews-widget input {
     float: left;
     margin-bottom: 1.6rem;
     margin-right: 5px;
     width: 68% 
}

.enews-widget #subbox1 {
    float: left;
    margin-bottom: 1.6rem;
    margin-right: 5px;
    width: 100%
}

.enews-widget input[type="submit"] {
     display: block;
     float: right;
     margin: auto;
     width: 28%;
}

The text beneath seems to be OK so far!

Thank you so much...!

[Anita]

Oh, you're welcome. Glad you got it.

---

Love coffee, chocolate and my Bella!

[Author]

Posts