[Resolved] Form takes up lots of space

[Leif]

OK cool that’s easy. Almost done but the spacings seems to be all funky again. 🙁
I’m just modelling it after my current home page but I made a few pictures.

mobile
https://www.screencast.com/t/lxCfw801IV

desktop
https://www.screencast.com/t/lL77Arhj

[David]

I can’t understand what has changed by moving it to a hook and adding the additional wrapper. So can you just comment out the CSS for the form and i’ll take another look at it.

[Leif]

I duno man. I commented it out though.
I have no idea how to do this layout stuff. I wish I did T_T

here is the code I commented out in case its interesting:

/*.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;
}
input {
text-align: center;
}
.signup-container {
    padding: 20px 0;
    background-color: green;
}*/

[David]

So lets give this a shot:

@media (max-width: 768px) {
    .signup-container {
        padding: 4% 2%; 
        background-color: green;
        text-align: center;
    }

    #mc_embed_signup_scroll {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #mc_embed_signup_scroll>input,
    #mc_embed_signup .clear input[type="submit"],
    .signup-headline {
        width: 100%;
        margin: 5px 0;
    }
}

@media (min-width: 769px) {

    .signup-wrap,
    #mc_embed_signup_scroll {
        display: flex;
        width: 100%;
    }
    .signup-wrap {
        padding: 0 40px; /* added inner left and right padding */
    }

    #mc_embed_signup_scroll>input,
    #mc_embed_signup .clear {
        margin: 0 5px; /* Column gap - increase 5px */
    }

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

    .signup-container {
        padding: 40px 0; /* removed outer left and right padding */
        background-color: green;
    }

}

The one issue is at the very bottom of your markup after the form is space that has been center aligned which needs to be removed. Its what is causing the extra space below the form on mobile.

[Leif]

Hurrah!

OK just a little thing and then I can spam it all over my site.
On my home page the inputs and buttons are evenly spaced in desktop and also squished in closer than the menu above which I like.

How do I do that? If you just point me at the spots in the css I will happily poke away at it until I get it just the way I like.
I get some css but I have no idea how to do any layout 😛

[David]

I edited the CSS above and have added comments to show where the changes were made.

[Leif]

I got it pretty close to what I was looking for so I added the css to additional css and hooked it in everywhere.

and it went crazy.

the test page works fine with the css globally.
But when i hooked the element everywhere the about page looked like this
ahhh

I only checked that one page and it has no css special to it (it does have a sidebar though :|), so I rolled it back to just the test page.
So I dont know what’s up with that

Also in mobile I couldnt get the bottom padding to shrink. You mentioned I have a centered space…but I dont see it 😐

[David]

Sounds like a caching issue. If the CSS is in the Customizer > Additional CSS then it should be present across the site.

Can you try hooking it everywhere, and flush any plugin and browser caches.

[Leif]

I tried a different computer and same thing. Its actually only on my blog posts and my about that it goes crazy.

Those pages have a hook with this code but I dont think it would interfere. 😐
I don’t want to leave it up on my posts because it looks bad

<h2>Join the mailing list for 1-4 super useful (and short!) emails a month </h2>
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<!-- <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
</style>
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ -->

<div id="mc_embed_signup">
<form action="https://fiveyearfireescape.us19.list-manage.com/subscribe/post?u=944026682ed6fed8919580a81&id=52f8c3ae3c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required="">
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_944026682ed6fed8919580a81_52f8c3ae3c" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->

[David]

It sounds as though that is interfering with the other form. Can you hook that code into the test page as well so i can see what the conflict is?

[Leif]

oh man that’s genious, added to test page. Also all the pages where the conflict occurs have side bars by coincidence…if that matters 😐

I relinked the test page to make it easier to find 🙂 https://fiveyearfireescape.com/test-page/

[David]

So that page looks fine to me – weird, when you added the code to all the pages did you try flushing any caches including browser? If its still an issue then can you add the sidebar to that page, but i can’t see why that would interfere. Let me know.

[Leif]

oh yeah you’re right…sidebar didnt seem to do it either.
I put it up on my least read post 😐
https://fiveyearfireescape.com/4-percent-rule-detailed-explanation/

[David]

So it displays correctly when you remove the other code from the header?

[Leif]

Ummm, it seems to display correctly everywhere that isn’t my about page or my blog posts 😐

[Author]

Posts