[Resolved] Form takes up lots of space

[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

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

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

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

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leif]

So I made this test page where I removed the LGC

https://fiveyearfireescape.com/test-page/

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leif]

ok updated 🙂

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leif]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

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

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

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

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.

[Author]

Posts