- This topic has 5 replies, 2 voices, and was last updated 1 year, 9 months ago by David.
-
AuthorPosts
-
July 15, 2022 at 3:00 am #2283356Joey
I’m trying to achieve something similar to this effect, where the “Subscribe” button is to the right of the signup form on desktop, but below, spanning the length of the page on mobile.
Is there a simpler way to do this? The above code isn’t working on my site and I’m not sure how to modify it—if I use
!important
ondisplay: inline-block
it screws up other aspects, like mobile view. I’m having trouble making it work on my site.This is the code for my signup form, as can be seen at the bottom of the page on my website:
<div id="mc_embed_signup"> <form action="https://simipress.us4.list-manage.com/subscribe/post?u=c9064154e2c953efbfd3787da&id=86cd4552bf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate=""> <div id="mc_embed_signup_scroll"> <div class="mc-field-group"><input type="email" placeholder="Email address" name="EMAIL" class="required email" id="mce-EMAIL"></div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <div style="position: absolute; left: -5000px;"><input type="text" name="b_0b5586be71b0fee16a03f5684_e41ec18eab" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </div> </form> </div>
Any help would be appreciated. Thank you.
July 15, 2022 at 6:08 am #2283481DavidStaffCustomer SupportHi there,
is it possible to change the HTML ?
As its painful to make that happen, for example – try this CSS:#mc_embed_signup_scroll { display: flex; flex-wrap: wrap; align-items: flex-end; } #mc_embed_signup .indicates-required{ flex: 1 0 100%; order: 10; text-align: left !important; } #mc_embed_signup .mc-field-group { flex: 1 1; padding-bottom: 0 !Important; margin-right: 5px; } #mc_embed_signup #mc-embedded-subscribe { line-height: 1.5em; font-size: 18px; padding: 8px; margin: 0 !important; height: auto; } #mc_embed_signup #mce-responses { order: 20; } .gb-grid-wrapper { display: flex; flex-wrap: wrap; }
But look what happens if you click and then click outside of the input field and the
The field is required
notice appears.See here:
Ideally the submit button HTML should be inside the
mc-field-group
July 16, 2022 at 2:57 am #2284223JoeyWow, thank you David, when I move the submit button to the
mc-field-group
, the CSS works really well, and it looks awesome.I added this code to make it span the length in mobile, and it seems to be working well:
@media (max-width: 768px) { #mce-EMAIL { width: 100%; } .submit-button { width: 100%; }
I’m having one issue I can’t figure out. It looks like this in desktop and like this in mobile after I submit the form. Is there a way to put the “Thank you for subscribing!” message under the Subscribe button, or just somewhere more logical (in desktop)? I think I’m missing something simple. Thanks again!
July 16, 2022 at 5:19 am #2284301DavidStaffCustomer SupportWith the Button moved inside the
mc-field-group
you shouldn’t need any of my CSS 🙂July 16, 2022 at 11:24 pm #2284921JoeyWow, I feel kind of dumb, you’re right. Thank you so much.
July 17, 2022 at 6:33 am #2285128DavidStaffCustomer SupportGlad to be of help 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.