Adjusting the TNP Subscription Minimal for Mobile

[keepwritingkidlit]

Hello! I’m using a TNP Subscription Minimal box on my website (designed with WordPress). It looks great on a desktop, but terrible on a phone. I’d like it to adjust so that the email field and subscribe button stack and align center when viewed on a phone. (Or shrink and stay side by side. Either works.) I know you can use the @media rule in css to do this, but I can’t figure it out. Can anyone advise? This is my current code:

<div style=”padding:0;text-align:center;margin-top:0;margin-bottom:0;font-Family:raleway;” class=”wp-block-tnp-minimal .tnp-submit type="submit" value="Subscribe" style="">”><p>Sign up to receive interviews to your inbox!</p><div>

<div class=”tnp-subscription-minimal”>
<form action=”” method=”post” style=”padding:0;text-align:center;”>
<input type=”hidden” name=”nr” value=”minimal”>
<input type=”hidden” name=”nlang” value=””>
<input class=”tnp-email” type=”email” required name=”ne” value=”” placeholder=”Type your email…” style=”width:11rem;”>
<input class=”tnp-submit” type=”submit” value=”Subscribe” style=”background-color:#00A7E1;width:7rem;font-weight:bold;font-size:1rem;font-Family:raleway;”>
</form></div>
</div></div>

I am new at this so thanks in advance!

[Michael]

Hello,

considering that various css rules may be applied to various elements at once, causing display issues (expecially in plugins-rich websites or generally, in WordPress), it might be better if you let me have a live url of your form, so I can take a closer look.

Michael

[keepwritingkidlit]

Thank you, Michael! So I got it to work! I downloaded the Simple Custom CSS Plugin and put all the code in there and it started to respond!

The only thing that’s not working is the margin top. This is the CSS:

.wp-block-tnp-minimal p {
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-family: raleway;
}

Everything else works, but margin top makes no change. However, when I directly insert that into the style tag of the html, it works. Do you know why that might be?

Thanks!
Website is https://www.keepwritingkidlit.com/

[Michael]

Hello,

this is probably due to another rule for the same css class which is conflicting. Even if it’s not advised to do so, try to append the !important tag in your rule, like margin-top: 0 !important;

Michael

[Author]

Posts