Here's a question I have about my embedded form. Why does the display property of inline-block make the "submit" and "terms" elements appear higher than the email field? And more importantly, how can I fix this issue?
I've attempted to use the traditional approach of adjusting the margin-top, but unfortunately, it hasn't been successful. Let me provide you with a snippet of the code that I have implemented.
var coll = document.getElementsByClassName("open-terms");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("close-terms");
var content = document.getElementById("terms-wrapper");
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
} body {
font-family: century-gothic, 'AppleGothic';
}
#mlist-email {background-color: white; border: white solid 1px; font-size: 12px; font-family: inherit; text-transform: capitalize; padding: 0 22.5px 0 22.5px; height: 45px; font-family: century-gothic, sans-serif; letter-spacing: 0; font-weight: 400; font-size: 14px;}
#mlist-email:focus {outline: none;}
#close-chimpy {float: right; margin-right: 5px; letter-spacing: 6px; color: black; text-transform: uppercase;}
#close-chimpy:hover {color: rgb(181,57,102)}
#button-wrapper {text-align: center; position: absolute; bottom: 30px; right: 30px;}
.mlist-trigger {background-color: pink; padding: 20px; font-family: century-gothic, 'AppleGothic'; width: 250px; cursor: pointer; transition: 0.3s;}
.mlist-trigger:hover {opacity: 0.7;}
#chimpy-lightbox input[type="email"]::placeholder {color: black;}
#chimpy-lightbox {font-family: century-gothic, 'AppleGothic'; z-index: 2008; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.7); display: none;}
@media only screen and (max-width: 374px) {
#chimpy-lightbox input[type="submit"] {padding: 0 !important; width: 68% !important;}
.mlist-submit-wrapper {width: 100%; margin-left: 0; padding-top: 15px;} #mlist-email-wrapper {width: 100%; margin-left: 0;}
}
.open-terms {cursor: pointer; width: 100%; border: none; color: black; text-align: left; outline: none; font-size: 15px;}
.close-terms:hover:after, .open-terms:hover:after {color: red;}
.open-terms:after {content: 'Terms'; color: black; text-transform: uppercase; font-weight: bold; margin-left: 5px;}
.close-terms:after {content: "Hide"; text-transform: uppercase;}
.content {padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1;}<link rel="stylesheet" href="https://use.typekit.net/oov2wcw.css">
<form name="mlist-form-validate" method="post" id="mlist-form">
<div id="mlist-form-wrapper" style="padding-top: 200px; text-align: center;">
<div id="mc_embed_signup_scroll">
<h2 style="text-transform: uppercase; letter-spacing: 6px;">Join</h2>
<div class="mlist-email-wrapper" style="display: inline-block; vertical-align: top;">
<label id="email-error" style="font-size: 10px; color: #ff0000; text-align: left; float: left; padding-top: 0px; display: none;"></label><br>
<input oninvalid="" type="email" value="" placeholder="email" name="EMAIL" class="required email" id="mlist-email" required><br>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f206f10b38a504434c650c6bf_5ce815006b" tabindex="-1" value=""></div>
<div class="mlist-submit-wrapper" style="display: inline-block; white-space: nowrap"><input type="submit" value="Submit" name="subscribe" id="mlist-submit" class="button" required><br><a href="javascript:void(0)" class="open-terms"><span></span></a></div>
<div class="content" id="terms-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</form>