[Support request] Single Line MailChimp Subscription Code

Home Forums Support Single Line MailChimp Subscription Code

This topic contains 6 replies, has 2 voices, and was last updated by  David 1 month, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1221587

    Rafael

    Hello. I am trying to make a one line subscription box to add to my home page to use with my mailchimp account. I have been able to add the fields, headers and subscribe box, but I am unable to get everything on one line.

    Ideally, I would like to have “Subscribe to My blog – First name, Email – Subscribe button all on the same line” and also add the mobile responsiveness code since I know this will be an issue on browsers with narrow widths.

    I have tried adding this CSS but the button code does not seem to have any effect on the layout. I do not know if the Generatepress theme could be impacting this or not.

    #mc_embed_signup { border: none; text-align: center; width: 100%; }
    .mc-field-group { display: inline-block; }
    .clear { display: inline-block; }
    .button { display: inline-block; }

    #1221865

    David Customer Support

    Hi there,

    try this CSS instead:

    #mc_embed_signup_scroll {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #mc-embedded-subscribe {
        margin: 0 !important;
    }
    
    @media (max-width: 768px) {
        #mc_embed_signup_scroll {
            flex-wrap: wrap;
        }
    
        #mc_embed_signup_scroll>div,
        #mc_embed_signup_scroll input {
            width: 100% !important;
        }
    }
    #1222077

    Rafael

    Much appreciated, that works better. Is there any way that I can get the header on the same line as well?

    I also noticed that I lost the SUBSCRIBE button on the Right Sidebar on my blog page after loading new CSS, however I do not know if that’s what caused it because removing the new CSS does not seem to affect it.

    I changed the div class for the sidebar subscribe to see if the new code was affecting it but I was not able to fix it. (I am still extremely new to all this).

    #1222804

    David Customer Support

    Could you move the <h2> heading inside the same <div> as the Mailchimp code – make it a little easier to get the two inline.

    Did you resolve the sidebar issue?

    #1222864

    Rafael

    This is what I added and it seems to be working:

    <label for=”mc-field-group”><h3>Subscribe to this Blog:</h3></label>

    Not sure if that’s optimal but it worked.

    I am still trying to figure out the sidebar issue. Any thoughts?

    #1222872

    Rafael

    Hi David, I just figured it out. I had to rename the form items for the sidebar as it was pulling in the css styling from the home page. Thanks again!

    #1223103

    David Customer Support

    Awesome – glad to hear you got it resolved

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.