[Resolved] Newsletter form layout mismatch

[Matteo]

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.

Example.

Is there a solution?

[David]

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;
}

[Matteo]

Thank you

[David]

You’re welcome

[Author]

Posts