Archived topic
Newsletter form layout mismatch
3 replies · Started by Matteo on February 21, 2021
Viewing posts 1–4 of 4
Good morning,
I have a problem with my newsletter form at the end of every blog post.
On mobile, the part with the email field and below goes out of the screen.
Is there a solution?
Hi there,
the form is added using Thrive Leads and has this CSS added:
@media (min-width: 300px) {
[data-css="tve-u-85e7d01234b7f4"] {
float: none;
background-color: rgb(245, 245, 247) !important;
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 600px !important; /* This line is causing the issue */
margin-bottom: 20px !important;
padding-bottom: 20px !important;
}
}You will see the line i have commented is forcing the Form to be 600px wide on any screen over 300px ... which is breaking the layout. I am not sure if you can change those styles in Thrive?
If you cannot change them, the you can add this CSS to correct hat:
.thrv_wrapper.thrv_lead_generation {
max-width: 600px;
width: auto !important;
}Thank you
You're welcome
This archived topic is closed to new replies.
