Hello friends,
Any thoughts on why the newsletter form button would appear like the attached screenshot? This is the page. It is the bottom form. Should be the same for desktop and mobile.
Hi Dennis,
On desktop the button is styled with the .hs-button.primary, input[type=“submit”], input[type=“button”] selector but on mobile it’s being overriden with this media query:
@media (max-width: 767px) {
.content-download form.hs-form.stacked input {
background-color: #fff;
}}
Desktop CSS
Mobile CSS
You can try to figure out where that CSS is coming from and if it can be updated or you could just force the background colour on to your button on mobile. Ideally giving the form a class so that you don’t affect the colours on other forms and having something like:
@media (max-width: 767px) {
.your-class .hs-button.primary, input[type="submit"], input[type="button"] {
background: #00b4f0 !important;
}
}
or just adding styling to the Head HTML of that page in style tags:
<style>
@media (max-width: 767px) {
.hs-button.primary, input[type="submit"], input[type="button"] {
background: #00b4f0 !important;
}
}
</style>
I hope that helps!
HubSpot Design / Development
If this helped, please mark it as the solution to your question, thanks!
I saw it right after I submitted this..long day…