[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, 10 hours ago.

Viewing 15 posts - 31 through 45 (of 50 total)
  • Author
    Posts
  • #924660

    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

    #925288

    David Customer Support

    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.

    #926441

    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;
    }*/
    #926676

    David Customer Support

    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.

    #927703

    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 😛

    #928051

    David Customer Support

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

    #928794

    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 😐

    #928855

    David Customer Support

    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.

    #929014

    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-->
    #929256

    David Customer Support

    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?

    #929362

    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/

    #930000

    David Customer Support

    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.

    #930258

    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/

    #930729

    David Customer Support

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

    #930892

    Leif

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

Viewing 15 posts - 31 through 45 (of 50 total)

You must be logged in to reply to this topic.