Issue with text overlapping when minimising screen

Hi,

I have an issue with my newsletter signup at the bottom of my blog posts, where the text below the fields ("You may unsubscribe at any time...") overlaps when minimizing the window. I first saw this when I checked on mobile. I don't have that issue with my newsletter signup on the homepage, which is why I'm clueless what this could be about.

The newsletter signup on the blog is being pulled in via a plugin and I've contacted their support, and they checked and said that it's not being caused by the plugin.

I also use some code to style the fields in my newsletter signups.

https://www.kristinkuehn.com/writing/fall-equinox-2023

pw: 2eRFn7gQ

Any idea what might be causing this and how to fix it?

Many thanks!

Hi, please can you share a screenshot of the issue? This is what I see, seems fine?

Is this the issue you are referring to?

Have you added the -2rem margin or is that embedded in the code?

@Ziggy funky! which dimension did you test to reproduce the issue?

3 minutes ago, melody495 said:

which dimension did you test to reproduce the issue?

Narrower them 320px which is where that media query kicks in.

3 minutes ago, Ziggy said:

Is this the issue you are referring to?

Have you added the -2rem margin or is that embedded in the code?

Yes, this is the issue that I'm referring to.

However, when I minimize my window on my computer now, there's no issue anymore (I could swear there was yesterday), but my phone is still showing the same issue (in a private window). 

I have no idea what the -2rem margin is... where would I have added that? I can share the code with you, though I'd have to share that in a private message I think. Do you want me to do that?

1 minute ago, Aurora said:

I have no idea what the -2rem margin is... where would I have added that? I can share the code with you, though I'd have to share that in a private message I think. Do you want me to do that?

Yes, you can do that.

This is probably baked into the embed code, but may be changeable, or at least you can use my screenshot to explain it to their support, might help.

3 minutes ago, Ziggy said:

Yes, you can do that.

This is probably baked into the embed code, but may be changeable, or at least you can use my screenshot to explain it to their support, might help.

I can actually share it here, I think. (I thought it would be the whole code.) This is the CSS:

[data-wm-plugin="load"]{
  --inner-spacing: 17px 17px;
  --outer-spacing: 0px 0px;
  border-width: 1px;
  border-style: solid;
  border-radius: 0px;
  border-color: hsla(0, 0%, 100%, 100%);
}

What plugin is this? Looks like one from Will Myers? Is it a paid plugin?

2 minutes ago, Ziggy said:

What plugin is this? Looks like one from Will Myers? Is it a paid plugin?

Yes and yes : ) Its' called Section Loader Supreme.

Can you tell if the issue is caused by the plugin?

4 hours ago, Ziggy said:

Not seen that one before, looks good though!

I don't think this has anything to do with the plugin, try adding this to Custom CSS:

@media screen and (max-width: 320px)
  .newsletter-block .newsletter-form-footnote p {
    margin-top: 0rem !important;
}

Thank you, Ziggy. That resolved the issue, though I still don't understand what was causing it. Do you?

There's a lot of white padding below on mobile. Why I don't know. Is that something that can be reduced so that it looks more like on the "writing" page in terms of the spacing?

14 hours ago, Aurora said:

There's a lot of white padding below on mobile. Why I don't know. Is that something that can be reduced so that it looks more like on the "writing" page in terms of the spacing?

The space below is taken up by a code block, you can make that smaller or probably place it stacked under the newsletter block (please don't put it on top of the newsletter block!)

7 minutes ago, Ziggy said:

The space below is taken up by a code block, you can make that smaller or probably place it stacked under the newsletter block (please don't put it on top of the newsletter block!)

I can't reduce the newsletter code block (that I know of, see screenshot). I don't see any other code.

I think it's on the page that the newsletter block is pulling from, not the blog page itself.

7 minutes ago, Ziggy said:

I think it's on the page that the newsletter block is pulling from, not the blog page itself.

It looks like this:

Add this to Custom CSS, save and refresh the page, then shorten that code block. 

ALSO don't forget to edit this page in mobile view, and as I suggested previously, move the code block under the newsletter.

html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
  display: none !important;
}

13 minutes ago, Ziggy said:

Add this to Custom CSS, save and refresh the page, then shorten that code block. 

ALSO don't forget to edit this page in mobile view, and as I suggested previously, move the code block under the newsletter.

html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
  display: none !important;
}

I figured out how to shorten the code block on desktop view.

There's nothing I can shorten on mobile view (as far as I can see).

I added the code, but it doesn't seem to change anything.

The padding looks humungous on mobile :-(

In addition, it says that there's a "syntax error" in the first line of the code we added yesterday:

@media screen and (max-width: 320px)
  .newsletter-block .newsletter-form-footnote p {
    margin-top: 0rem !important;
}

57 minutes ago, Aurora said:

In addition, it says that there's a "syntax error" in the first line of the code we added yesterday:

Replace with this:

@media screen and (max-width: 320px) {
  .newsletter-block .newsletter-form-footnote p {
    margin-top: 0rem !important;
  }
}

Then add the most recent code, then shorten the code block on mobile.

47 minutes ago, Ziggy said:

Replace with this:

@media screen and (max-width: 320px) {
  .newsletter-block .newsletter-form-footnote p {
    margin-top: 0rem !important;
  }
}

Then add the most recent code, then shorten the code block on mobile.

Thank you, Ziggy, the syntax error is fixed.

I added the other code and shortened the code on mobile, but now it's overlapping again on mobile.

This is the code I have:

/* No overlapping under newsletter sign-up button */
@media screen and (max-width: 320px) {
  .newsletter-block .newsletter-form-footnote p {
    margin-top: 0rem !important;
  }
}

/* Remove padding below newsletter sign-up on blog post page */
html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
  display: none !important;
}

8 minutes ago, Aurora said:

I added the other code and shortened the code on mobile, but now it's overlapping again on mobile.

It seems to be fine when I view it.

3 minutes ago, Ziggy said:

It seems to be fine when I view it.

This is how I see it on mobile from too different browsers in a private window:

I can't seem to replicate that in any way I try, so I don't know what's causing it on your end.

3 minutes ago, Ziggy said:

I can't seem to replicate that in any way I try, so I don't know what's causing it on your end.

Ziggy, thanks so much for your help!

@Ziggy It looks like the code block is only on mobile view but not on desktop view. Do you know why? I didn't put it there, so I'm wondering how it got there. At some point, I had someone from the plugin support come in, and I'm wondering if they could have put that there, or if this is something that Squarespace puts there.