[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 2 days, 9 hours ago.

Viewing 15 posts - 1 through 15 (of 50 total)
  • Author
    Posts
  • #874639

    Leif

    I have a form which takes up a lot of space, especially in mobile view. Also in mobile all the text ends up getting all hidden inside the text box. See here

    Is there a way I can snap the boxes underneath eachother when in mobile mode? Like this

    I dont know how you guys find how I do things but the text in the section block that I have starts with
    <div id="mc_embed_signup"><form id="mc-embedded-subscribe-form"

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #875016

    Tom Lead Developer

    It looks like you’re using Lightweight Grid Columns to set the columns. Can you try setting the mobile-grid option to 100? Right now they’re set to 25 as well.

    Let me know 🙂

    #875205

    Leif

    So I know that I can make them stack on top of eachother by making every column 100% but then this section takes a huge amount of space so I was hoping to keep it 3 wide and put two of the columns into 1 column for mobile mode.

    #875420

    David Customer Support

    Hi there,

    it may be simpler if you remove the LGC columns and let the form fields stack. We can then provide some CSS to style it for the devices. Let us know

    #877367

    Leif

    So if I get rid of LGC the parts will all stack and take up more vertical screen space.
    If we css it, is it possible to make a certain horizontal setup for desktop viewing and something specific for mobile.

    I like how it looks in desktop mode now, just not mobile. I have no special attachment to LGC it just lets me make the desktop version of my site easily.

    #877398

    David Customer Support

    Add the HTML and Form without LGC, this should Stack and probably be ok for mobile. I can then provide some CSS to make the row layout for desktop.

    #878417

    Leif

    So I made this test page where I removed the LGC

    I tried making html tables to accomplish this before but it ended up being a big mess the way i wrote it.

    #878765

    David Customer Support

    So remove the ‘headline’ label from the mailchimp form as it don’t handle HTML very well.
    Then add this markup, replacing the comment with the shortcode for the form.

    <div class="signup-wrap">
        <div class="signup-headline">
            WANT TO <span style="color: #ffa500;">RETIRE</span><br>
            EVEN EARLIER?
        </div>
        <!-- Add the mailchimp shortcode here -->
    </div>

    Then i can provide the CSS for the layout.

    #878936

    Leif

    ok updated 🙂

    #878949

    David Customer Support

    I made slight tweak to the HTML above ie. this line i added a <br>:

    WANT TO <span style="color: #ffa500;">RETIRE</span><br>

    In your form set-up can you make sure there are no line breaks or extra spaces between input elements? Currently have an empty space thats gonna cause some pain.

    #880240

    Leif

    OK updated and the code is all in one huge brick with no spaces or returns.

    #880263

    David Customer Support

    So the screenshot you provided, there isn’t really enough space for the layout on mobile devices. So try this CSS and let me know:

    .signup-wrap {
        display: flex;
    }
    
    .signup-headline {
        margin-right: auto;
    }
    
    #mc_embed_signup_scroll {
        display: flex;
    }
    
    @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 {
            margin-top: -1em;
        }
    }
    #881019

    Leif

    OK part way there 🙂 Thanks

    In mobile I guess it would look better if the text was above the inputs, and the inputs were touching like between my input 2 and button right now.
    In desktop I was hoping to have the <text-input1-input2-button> evenly spaced across the page.
    In tablet I was hoping to have the input1 and input2 stack on top of eachother
    and

    #881529

    Tom Lead Developer

    For mobile, you could try this:

    @media (max-width: 768px) {
        .signup-wrap {
            flex-direction: column;
        }
    
        .signup-headline {
            margin: 0 auto 20px auto;
        }
    
        #mc_embed_signup {
            margin-left: 0;
        }
    }

    The space between inputs seems to be from a &nbsp; character after the first input.

    On desktop, I’m not really sure what you mean by evenly spaced? Like this?:

    #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;
    }
    #881703

    Leif

    Hmm kind of, I got rid of the &nbsp
    I was trying to get the mobile together like this
    – 1 line of text on top
    – inputs touching with just a rule in between
    – button inline with the inputs not right aligned.
    – I tried to draw it

    here is an example i found on another page of the input boxes touching with a rule in between them

    For desktop its pretty nice, I would like to reduce the padding around this stuff and make the area behind this green (for all mobile and desktop). Right now I control that with the ‘sections’ but I’ll lose that ability with the proposed method.

    For reference I plan to hook this code into my the tops of all my pages.

Viewing 15 posts - 1 through 15 (of 50 total)

You must be logged in to reply to this topic.