Archived topic
Single Line MailChimp Subscription Code
6 replies · Started by Rafael on March 31, 2020
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; }
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;
}
}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).
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?
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?
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!
Awesome - glad to hear you got it resolved
