My code snippet for the newsletter submit form needs some adjustments to keep the icon vertically centered and properly aligned. I want to make sure the icon stays fluidly centered in its position.
.cm-subscription {
max-width: 100%;
display: block;
width: 400px;
}
@media (max-width: 768px) {
.cm-subscription {
max-width: 340px;
display: block;
padding-bottom: 20px;
margin: auto;
}
}
...
...
<!--Footer Newsletter Subscription-->
<div class="cm-subscription">
<form autocomplete="off" action="/subscribe" method="post">
<div class="cm-flex">
<div style="flex: 1 1 0;">
<input type="email" name="email" placeholder="[email protected]" required>
</div>
<div style="margin-left: -20px;">
<button type="submit">⟶</button>
</div>
</div>
</form>
</div>