My tweetable pull quote code snippet is malfunctioning all of a sudden!

ArthurC · August 1, 2023

I created a tweetable pull quote code snippet that had a big quotation mark above and the pull quote below. This would change color upon hovering and then tweet out with author handle, url, and other things when clicked. It was working beautifully on all devices and on all the blog posts that I'd added it to. Here's the url for one: https://www.teachersgoinggradeless.com/blog/long-unwinding-road

Then, this evening, I noticed that the quotation mark had suddenly "distanced itself" from the quotation below and was merging into the block above (the body of the blog post). I had done some work on the site today, but it involved mostly all stock Squarespace things, like I added a carousel of recent blog posts to my main page and Start Here page. I turned on the Parallax feature on the middle background image on my main page. Several days ago, I added some custom CSS from the user @Ziggy to prevent embedded scripts from adding unwanted height. I also added the pull quote code snippet to two more blog posts today (I've been adding 1-2 blog posts per day, working backwards from my newest). Everything was looking and functioning great until tonight!

Another clue perhaps is that the actual script of my code snippet has weirdly also become unresponsive: Changing the number of pixels for any of the "top:" "bottom: " or "margin-top:" command doesn't do ANYTHING anymore on ANY of the blog posts! I know I would see it shifting when I changed these numbers before because I played around with them for a long time before I got the look I wanted.

Here is the embed code snippet for the tweetable pull quote on one of the blog post pages:

<!DOCTYPE html>
<html>
<head>
<title>Pull Quote Tweet</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap');

.pullQuoteContainer {
text-align: center;
position: relative;
margin-top: 60px;
cursor: pointer;
}

.pullQuoteContainer:before {
content: "“";
font-size: 120px;
font-family: 'League Spartan', sans-serif;
color: black;
position: absolute;
top: -105px;
left: 50%;
transform: translateX(-50%);
transition: color 0.3s;
}

.pullQuoteContainer p {
font-size: 24px;
color: black;
max-width: 80%;
margin: 0 auto;
padding-bottom: 10px;
transition: color 0.3s;
}

.tweetLink {
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 10px;
transition: color 0.3s;
}

.tweetLink a {
color: black;
font-size: 18px;
text-decoration: none;
display: flex;
align-items: center;
margin-top: 10px;
transition: color 0.3s;
}

.tweetIcon {
font-size: 18px;
margin-right: 8px;
margin-top: 10px;
transition: color 0.2s;
}

.pullQuoteContainer:hover,
.pullQuoteContainer:hover:before,
.pullQuoteContainer:hover p,
.pullQuoteContainer:hover .tweetLink,
.pullQuoteContainer:hover .tweetLink a,
.pullQuoteContainer:hover .tweetLink .tweetIcon {
color: #75C4AE; /* Change color on hover */
}
</style>
</head>
<body>

<div class="pullQuoteContainer" data-quote="We’ve walked the path of A-F grading for so long that it feels inevitable from the perspective of students, parents, employers, and institutions." data-author="@BarryFishman" data-handle="@tg2chat" data-url="https://www.teachersgoinggradeless.com/blog/long-unwinding-road">
<p>We’ve walked the path of A-F grading for so long that it feels inevitable from the perspective of students, parents, employers, and institutions.</p>
<p class="tweetLink">
<span class="tweetIcon">
<i class="fab fa-twitter"></i>
</span>
<a href="#" onclick="tweetPullQuote(this)">Tweet this</a>
</p>
</div>

var text = encodeURIComponent(pullQuoteText + " " + authorHandle + " " + tg2chatHandle + " " + url);
var tweetUrl = "https://twitter.com/intent/tweet?text=" + text;
window.open(tweetUrl, "_blank");
}
</script>

</body>
</html>

Thank you for any help you can give!

Arthur

Edited August 1, 2023 by ArthurC

creedon · August 1, 2023

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

ArthurC · August 1, 2023

The url for a page where you can see the issue was posted in the url field of the form, but it was https://www.teachersgoinggradeless.com/blog/long-unwinding-road,

My site isn't private so no need for a site-wide password.

Ziggy · August 1, 2023

See highlighted. The top property of -105px is greater than the margin-top of 60px, so the quote text is left outside and above the rest of the container.

Try changing the top value to -25px.

ArthurC · August 1, 2023

Thank you, @Ziggy, for checking this out. Unfortunately, what has suddenly happened is that the code snippet isn't even responsive when I change it. Here's me trying to make the change you suggested:

https://watch.screencastify.com/v/Fl0ymvuXwziImcpLMkST

By the way, this happened on ALL the blog posts (about 15) where I had inserted these pull quotes SIMULTANEOUSLY yesterday. Prior to that they all looked and functioned beautifully.

Edited August 1, 2023 by ArthurC

Ziggy · August 1, 2023

I'm honestly not sure why that's not updating. Can you try putting your code into a Code block instead of an embed block?

ArthurC · August 1, 2023

Same thing, unfortunately. As I edit, nothing budges in the slightest—not in the moment or once I've saved it.

What I don't understand is why this code snippet, which was looking and functioning beautifully, started to do this SITE WIDE all of a sudden last night. The "top: -105" and everything else about the code was perfect everywhere—until it wasn't. It seems like some kind of update happened that is conflicting with the code.

The last CSS code I entered was the one you created to resolve the spacing issues with embedded scripts—and that didn't harm anything. Most of what I did yesterday was stock Squarespace stuff: adding a carousel of recent blog posts on two pages; adding the parallax feature on a background image on the main page; editing text. In short, nothing that would have had a slte-wide impact.

Could there have been a Squarespace update that messed up my pull quotes? I'm at a loss! 😞

ArthurC · August 1, 2023

One little random thing I did yesterday is that I used Squarespace's stock quote block on a new blog post (two quotes at the top, one from Foucault and one from Peter Townsend):

https://www.teachersgoinggradeless.com/blog/we-need-to-talk-about-sbg

Could this have confused my website about pull quote coding generally?

Ziggy · August 1, 2023

20 minutes ago, ArthurC said:

Could this have confused my website about pull quote coding generally?

I wouldn't have thought so.

ArthurC · August 1, 2023

What about Squarespace updates? Have any come down in the last day that might have impacted this?

Ziggy · August 1, 2023

Squarespace has been making some font updates over the last week, but I'm not sure that would have been the cause. Generally I've seen and heard about code/css issues a bit more this week, but I don't have any specific knowledge or fixes.

ArthurC · August 1, 2023

Do you have any further recommendations about what might be causing the problem?

ArthurC · August 1, 2023

One other thing, this seems to be affecting blog post pages only. I have another page, Start Here, where I had to slightly alter the tweetable pull quote code to get it to work (and it still does). AND this code still alters when I change the number of pixels, etc.

I've tried to take this code and embed it in the blog posts with the same stupid result of the quotation mark floating over the block above.

Here is the code that I'm using on Start Here:

<!DOCTYPE html>
<html>
<head>
<title>Pull Quote Tweet</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap');

.pullQuoteContainer {
text-align: center;
position: relative;
margin-top: 90px;
margin-bottom: 18px;
cursor: pointer;
}

.pullQuoteContainer:before {
content: "“";
font-size: 120px;
font-family: 'League Spartan', sans-serif;
color: black;
position: absolute;
top: -35px;
left: 50%;
transform: translateX(-50%);
transition: color 0.3s;
}

.pullQuoteContainer p {
font-size: 24px;
color: black;
max-width: 80%;
margin: 0 auto;
padding-bottom: 10px;
transition: color 0.3s;
}

.tweetLink {
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 10px;
transition: color 0.3s;
}

.tweetLink a {
color: black;
font-size: 18px;
text-decoration: none;
display: flex;
align-items: center;
margin-top: 10px;
transition: color 0.3s;
}

.tweetIcon {
font-size: 18px;
margin-right: 8px;
margin-top: 10px;
transition: color 0.2s;
}

.pullQuoteContainer:hover,
.pullQuoteContainer:hover:before,
.pullQuoteContainer:hover p,
.pullQuoteContainer:hover .tweetLink,
.pullQuoteContainer:hover .tweetLink a,
.pullQuoteContainer:hover .tweetLink .tweetIcon {
color: #75C4AE; /* Change color on hover */
}

</style>
</head>
<body>

<div class="pullQuoteContainer" data-quote="With the phrase ‘going gradeless,’ we hope to express the idea of moving—gradually or rapidly—away from the pernicious influence of grades, and toward more humane and effective methods of assessment and feedback." data-handle="@tg2chat" data-url="https://www.teachersgoinggradeless.com/start?123" onclick="tweetPullQuote(event)">
<p>With the phrase ‘going gradeless,’ we hope to express the idea of moving—gradually or rapidly—away from the pernicious influence of grades, and toward more humane and effective methods of assessment and feedback.</p>
<p class="tweetLink">
<span class="tweetIcon">
<i class="fab fa-twitter"></i>
</span>
<a href="#">Tweet this</a>
</p>
</div>

var text = encodeURIComponent(pullQuoteText + " " + tg2chatHandle + " " + url);
var tweetUrl = "https://twitter.com/intent/tweet?text=" + text;
window.open(tweetUrl, "_blank");
}
</script>

</body>
</html>

My tweetable pull quote code snippet is malfunctioning all of a sudden!

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ziggy

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources