Jump to content

Issue with text overlapping when minimising screen

Go to solution Solved by Ziggy,

Recommended Posts

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!

Link to comment

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

image.thumb.png.f76428bda9f1e2f64f6c2ab71c2bd59f.png

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

Is this the issue you are referring to?

image.thumb.png.a5e9226745deffcac7b4871feae9c69b.png

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
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.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
3 minutes ago, Ziggy said:

Is this the issue you are referring to?

image.thumb.png.a5e9226745deffcac7b4871feae9c69b.png

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?

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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%);
}
Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

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;
  }
}
Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Link to comment
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!)

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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.

Bildschirmfoto 2023-11-02 um 09.31.53.png

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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;
}

Bildschirmfoto 2023-11-02 um 10.16.55.png

Bildschirmfoto 2023-11-02 um 10.16.37.png

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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;
}

Bildschirmfoto 2023-11-02 um 12.09.20.png

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.