[Resolved] Form takes up lots of space

Home Forums Support Form takes up lots of space

This topic contains 49 replies, has 3 voices, and was last updated by  Tom 3 months ago.

Viewing 15 posts - 16 through 30 (of 50 total)
  • Author
    Posts
  • #881772

    Tom Lead Developer

    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?

    #882496

    Leif

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

    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 🙂

    #882581

    David Customer Support

    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.

    #883001

    Leif

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

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

    #883085

    David Customer Support

    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.

    #899960

    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

    Mobile has huge margins and no rule

    #900038

    David Customer Support

    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.

    #901358

    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.

    #901392

    David Customer Support

    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.

    #902459

    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.

    #902499

    David Customer Support

    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.

    #921119

    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

    #921323

    David Customer Support

    oops – yeah typo 🙂

    Can you move it to the after_header hook .

    #922495

    Leif

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

    #922516

    David Customer Support

    You can then style the outer container like so:

    .signup-container {
        padding: 20px 0;
        background-color: green;
    }
Viewing 15 posts - 16 through 30 (of 50 total)

You must be logged in to reply to this topic.