Education – Call to Action Subscriber Box

Community Forums Forums Design Tips and Tricks Education – Call to Action Subscriber Box

This topic is: resolved

This topic contains 6 replies, has 3 voices, and was last updated by  Tonya 3 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #112665

    suecline
    Member
    Post count: 13

    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/
    #112669

    Tonya
    Member
    Post count: 180

    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 :)


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

    #112670

    genwrock
    Member
    Post count: 678

    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


    #112675

    suecline
    Member
    Post count: 13

    @ 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

    #112679

    Tonya
    Member
    Post count: 180

    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 :)


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

    #112681

    suecline
    Member
    Post count: 13

    @ Tonya thank you, that worked like a charm!

    Sue

    #112685

    Tonya
    Member
    Post count: 180

    You’re welcome :)


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Education – Call to Action Subscriber Box’ is closed to new replies.