[Support request] Single Line MailChimp Subscription Code

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

[David]

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

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

[David]

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?

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

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

[David]

Awesome – glad to hear you got it resolved

[Author]

Posts