[Resolved] Form takes up lots of space

[Tom]

Your first screenshot looks almost identical to what David provided with his CSS above, doesn’t it? I’d have to see it again.

Any examples of what you want it to look like on desktop?

[Leif]

Oh yeah the examples of the desktop setup are easy. My current home page is fine for desktop

https://fiveyearfireescape.com/

but it was made with ‘sections’ which lets me control padding and color. Thats how I ended up going down this path in the first place. Its like a banner at the top of my pages.

For mobile I made this very impressive graphic 🙂

http://www.screencast.com/t/nQueNSjkurRT

[David]

Hi there,

update your CSS to:

.signup-wrap, #mc_embed_signup_scroll {
    display: flex;
}

.signup-headline {
    margin-right: auto;
}

@media (max-width: 768px) {
    #mc_embed_signup {
        flex: 1;
        margin-left: 3em;
    }

    #mc_embed_signup_scroll {
        flex-direction: column;
    }

    #mc-embedded-subscribe {
        width: 100%;
    }

    #mce-FNAME, #mc_embed_signup_scroll .clear {
        margin-top: 0.5em;
    }

    .signup-wrap {
        flex-direction: column;
    }

    .signup-headline {
        margin: 0 auto 20px auto;
    }

    #mc_embed_signup {
        margin-left: 0;
    }
    #mc_embed_signup_scroll .clear {
        margin-right: auto !important;
    }
    #mce-FNAME {
        position: relative;
    }
    .signup-wrap p {
        margin-bottom: 0;
    }
}

#mc_embed_signup {
    flex-grow: 1;
}

#mce-EMAIL,
#mce-FNAME {
    margin-right: auto;
    margin-left: auto;
}

#mc_embed_signup_scroll .clear {
    margin-left: auto;
    margin-right: 0;
}

To place the signup heading on one line would require a change to the HTML. Where the is no line break.

[Leif]

Hmmm now things are collapsed on top of eachother? (See image)

http://www.screencast.com/t/MroYfb1XNn7

Also how do I make the space behind this form green like so?

http://www.screencast.com/t/nQueNSjkurRT

[David]

I edited the CSS above to fix the overlap.
As the form is inserted into a Section you can change the Section background color in its settings.

[Leif]

Hi so a few things:
I need to hook this into my pages so I cant use the section block features to make the background green.

Also the padding at the bottom of the page is still huge in mobile and i cant figure out how to put a rule between the inputs. See images.

Desktop looks nice

http://www.screencast.com/t/L7piOgPz

Mobile has huge margins and no rule

http://www.screencast.com/t/xUDKzHrbl

[David]

I have edited the CSS here to remove some of the bottom margins from the form and to place some space between the second field and submit.

If thats correct then we can look at the markup required to use it in a hook and place the background color.

[Leif]

I cant tell if there is a rule between the two inputs in mobile mode. I dont see one but maybe its because my background is white?

I’m ok to try to hook this and change the color behind this section.

[David]

The spacing is there, as you said you can’t see it because of the colors.
Let us know when you have it in a hook as we may need to tweak things depending on where it is hooked.

[Leif]

OK its in

One thing is I want to get a green background behind the content like on my home page spanning the full width.
Also I dont know where to put the css so that it travels with the hook. I guess I just put it in my style.css?

Also we were back and forth on the padding a lot. If you just point at the css spots that control that I am happy to play with it myself instead of bugging you so much *embarrassed face*

Oh and i left the old form up on the test page so that I have some content and also a comparison point to where we were before.

[David]

So couple of things. Lets move it outside of the Content Hook so it can occupy the whole width of the screen. Change the hook to: inside_container hook.

Then we need to tweak your HTML.
First add the extra DIV signup-container around your existing HTML, and add the grid-container class to the sign-up wrap like so:

<div class="signup-container">
    <div class="signup-wrap grid-container">
        <!-- all other HTML remains the same -->
    </div>
</div>

Let me know once thats done.
Yes all CSS goes in either your child theme style.css or the Additional CSS in the Customizer.

[Leif]

ok i added it in. Sorry i got distracted so it took a while

did you mean to use a hook other than inside container? It was already inside container.
Also I wrote in <div class="signup-wrap gird-container”> instead of gird which I assume was a typo

[David]

oops – yeah typo 🙂

Can you move it to the after_header hook .

[Leif]

ok did it.
Everything looks kind of crazy but its done 🙂
https://fiveyearfireescape.com/test-page/

[David]

You can then style the outer container like so:

.signup-container {
    padding: 20px 0;
    background-color: green;
}

[Author]

Posts