Education – Call to Action Subscriber Box

[suecline]

Hi - I'm setting up a new site using Education and I'm having trouble with the subscriber box in the call to action widget.

http://209.59.178.236/~gses14/

I'm trying to get the box and button aligned to the right in the same position of the text. I'm close, now, but the Subscribe button is on the wrong darn side.

Can anyone help me with the right CSS for this?

Many thanks!

Sue

http://209.59.178.236/~gses14/

[Tonya]

Hi Sue,

Right now the individual elements within the Subscribe form are set to float: right; What you want to do instead is set the entire form to float: right; as such:

On line 171

#home-featured .call-to-action .enews form{
	display: inline;
	float: right; /* I added this */
}

Then remove the float: right; on lines 709 & 719.

To pull the subscribe button closer, get rid of the margin-right on line 717.

Cheers 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Genesis Developer]

This would be helpful for you 🙂

#home-featured .call-to-action .widget {
    padding: 45px 50px;
}
#home-featured .call-to-action .enews, #home-featured .call-to-action .enews p {
    display: table;
    line-height: 130px;
    margin: 0 auto;
    vertical-align: middle;
    width: 100%;
}
#home-featured .call-to-action .widgettitle {
    color: #ffffff;
    display: table-cell;
    font-family: 'Vollkorn',serif;
    font-size: 30px;
    font-style: italic;
    margin-bottom: -40px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}
#home-featured .call-to-action .enews form {
    display: table-cell;
    margin: 24px 0 0 30px;
}
#home-featured .call-to-action .enews #subbox {
    border-color: #c24d1b #fff #fff #c24d1b;
    border-left: 1px solid #c24d1b;
    border-style: solid;
    border-width: 1px;
    float: left;
    margin-right: 10px;
    width: 336px;
}

#home-featured .call-to-action .enews #subbutton {
    margin: 0;
    padding: 10px 16px 8px !important;
    width: 100px;
}

Best of Luck

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[suecline]

@ Tonya thank you! That at least got the form unscrambled. It's on different lines (or so it appears), though, so any other ideas?

@ genwrock thank you! I am not really sure what to do with that (my css foo is weak) - will any part of that align this mess?

Thanks to both of you for the assist!

Sue

[Tonya]

It's due to the widget title. Add the following 2 lines just after line 661:

#home-featured .call-to-action .widgettitle {
line-height: 65.5px; /* this one vertically centers the title */
float: left;

/* this one floats it & now it's not full-width pushing the form down */

Cheers 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[suecline]

@ Tonya thank you, that worked like a charm!

Sue

[Tonya]

You're welcome 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts