Code for wrapping grid gallery title is not working

Site URL: https://thedetoureffect.com/

Hi there,

Hoping somebody can help me with some sleuthing. A few weeks ago I found code suggested on Skillshare that worked really well to wrap the text below my image grid gallery (it was getting cut off and you couldn't read the full title). All of the sudden this week I noticed it just suddenly stopped working, my text is once again not wrapping. See my uploaded image for an example.

So then I looked on this forum for different code to try, and found this thread. None of the ideas here worked either. So maybe there's some other code I have elsewhere in my site that is preventing any of these from working?

After getting the text wrap to work initially, I added two other unrelated codes later. One was Google Analytics which I just copy/pasted directly, there shouldn't be anything wrong with it. The other was a featherlight thing that I got from this thread so I could have a pop-up when people click on my "pandemic planning" button. Maybe that messed up my text wrapping thing?

Grateful for any ideas. My site is thedetoureffect.com. Everything we're talking about is on the home page.

Add to Design > Custom CSS

.image-slide-title {
    white-space: initial !important;
}

@tuanphan thank you; it didn't work though 😞

On 7/6/2021 at 8:55 AM, TheDetourEffect said:

@tuanphan thank you; it didn't work though 😞

Just tested & see it worked here. Can you add & keep the code? We can check easier

On 7/6/2021 at 11:06 PM, tuanphan said:

Just tested & see it worked here. Can you add & keep the code? We can check easier

I added the code in my custom CSS for this site

4 hours ago, TheDetourEffect said:

I added the code in my custom CSS for this site

Your Custom CSS box has a syntax error. If you look at the bottom corner, you will see a red notice. Fix it first unless all (or some) code won't work properly

On 7/11/2021 at 2:29 AM, tuanphan said:

Your Custom CSS box has a syntax error. If you look at the bottom corner, you will see a red notice. Fix it first unless all (or some) code won't work properly

The syntax is in my Google Analytics code that is just directly copy/pasted from Google Analytics admin. The line in my custom CSS that is giving the syntax error is:

<!-- Global site tag (gtag.js) - Google Analytics -->

7 minutes ago, TheDetourEffect said:

The syntax is in my Google Analytics code that is just directly copy/pasted from Google Analytics admin. The line in my custom CSS that is giving the syntax error is:

<!-- Global site tag (gtag.js) - Google Analytics -->

Oh ok well I went googling and found out I don't have to put the analytics code in my css for squarespace if it's already in my External API. I removed it and now my wrap text code works again. Solved! Thank you!

On 7/13/2021 at 12:25 PM, TheDetourEffect said:

Oh ok well I went googling and found out I don't have to put the analytics code in my css for squarespace if it's already in my External API. I removed it and now my wrap text code works again. Solved! Thank you!

Do you need help with these?

Site URL: https://thedetoureffect.com/

2. (Tablet – hell songs) Align all buttons vertically

https://thedetoureffect.com/hell-songs

3. (Tablet ) Want to increase text width?

https://thedetoureffect.com/blog/trekking-europe-gear-review#header

4. (Desktop/Tablet – ) Pin icon overlap on text (All the page belong to Detour and Method have the same error)

https://thedetoureffect.com/blog/tag/Camping

On 7/20/2021 at 12:03 AM, tuanphan said:

Do you need help with these?

Site URL: https://thedetoureffect.com/

2. (Tablet – hell songs) Align all buttons vertically

https://thedetoureffect.com/hell-songs

3. (Tablet ) Want to increase text width?

https://thedetoureffect.com/blog/trekking-europe-gear-review#header

4. (Desktop/Tablet – ) Pin icon overlap on text (All the page belong to Detour and Method have the same error)

https://thedetoureffect.com/blog/tag/Camping

Sure, wow thanks for finding those! I don't have a tablet so I didn't realize. I do have the ability to click tablet vs mobile vs desktop view when I'm editing my blog posts though, and when I click tablet view that post in #3 looks fine? Towards the top of the page, it has two columns (my blog post plus the vertical bar on the righthand side that has my ads), but as you keep scrolling further down, that's when it looks like the text isn't spanning the width of the page, because my vertical bar doesn't have enough content to go down that far. Or is that not what you mean about text width?

I'd love all the hell songs buttons to be even with each other!

The pin thing is very annoying. I have code on my site that forces a pin button to show up every time anyone hovers over any image site-wide. I think I will just remove that, because on my actual blog posts where my Pinterest pins live, I have to insert individual code every time anyway. Because if I want the pins to have metadata, I have to insert them as code blocks instead of as images. Therefore the site-wide pin code doesn't work on those. And I don't think anyone is interested in pinning my other images.

5 hours ago, TheDetourEffect said:

Sure, wow thanks for finding those! I don't have a tablet so I didn't realize. I do have the ability to click tablet vs mobile vs desktop view when I'm editing my blog posts though, and when I click tablet view that post in #3 looks fine? Towards the top of the page, it has two columns (my blog post plus the vertical bar on the righthand side that has my ads), but as you keep scrolling further down, that's when it looks like the text isn't spanning the width of the page, because my vertical bar doesn't have enough content to go down that far. Or is that not what you mean about text width?

I'd love all the hell songs buttons to be even with each other!

The pin thing is very annoying. I have code on my site that forces a pin button to show up every time anyone hovers over any image site-wide. I think I will just remove that, because on my actual blog posts where my Pinterest pins live, I have to insert individual code every time anyway. Because if I want the pins to have metadata, I have to insert them as code blocks instead of as images. Therefore the site-wide pin code doesn't work on those. And I don't think anyone is interested in pinning my other images.

with align buttons, add to Design > Custom CSS

/* Hell songs tablet */
@media screen and (max-width:900px) and (min-width:641px) {
div#page-5b505230f950b763cdebf00d>.row:nth-child(2) .html-block {
    min-height: 210px;
}
div#page-5b505230f950b763cdebf00d>.row:nth-child(4) .html-block {
    min-height: 270px;
}
div#page-5b505230f950b763cdebf00d>.row:nth-child(6) .html-block {
    min-height: 150px;
}
}

17 hours ago, tuanphan said:

with align buttons, add to Design > Custom CSS

/* Hell songs tablet */
@media screen and (max-width:900px) and (min-width:641px) {
div#page-5b505230f950b763cdebf00d>.row:nth-child(2) .html-block {
    min-height: 210px;
}
div#page-5b505230f950b763cdebf00d>.row:nth-child(4) .html-block {
    min-height: 270px;
}
div#page-5b505230f950b763cdebf00d>.row:nth-child(6) .html-block {
    min-height: 150px;
}
}

 

Awesome, that seems to have worked! Thanks a ton! I would have never been able to cobble that together myself. 

I went to Marketing > Pinterest Save Buttons > Disabled, and that hasn't stopped the save buttons from hovering over all my images on my "all blog posts" page nor my individual blog posts. Any ideas? 

5 hours ago, TheDetourEffect said:

Awesome, that seems to have worked! Thanks a ton! I would have never been able to cobble that together myself. 

I went to Marketing > Pinterest Save Buttons > Disabled, and that hasn't stopped the save buttons from hovering over all my images on my "all blog posts" page nor my individual blog posts. Any ideas? 

No Pinterest here. Can you share link to a post & take a screenshot of pin button?

17 hours ago, tuanphan said:

No Pinterest here. Can you share link to a post & take a screenshot of pin button?

Here's a link: https://thedetoureffect.com/blog/working-on-the-road

I attached some screenshots.

Is it because I have this code block in the post?: <script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js"></script>

I was reading about how to make sure my pins have metadata in them (like alt text, data-pin-description, etc). I can't edit those things if I do an image block, so I had to use a code block to insert my pin at the bottom of the page. But, as a result, a "save pin" button would not hover over it. So, I had to add the script code I pasted above. I thought that would make the "save" button hover ONLY over my code block for the pin, and not every other image on the page. Maybe that's not correct.

Except...that can't be the reason, because the "save" button still hovers on my "all blog posts" page too, not just the individual post. Per the last screenshot.

@tuanphanany ideas as to why the "save" button still hovers over every image throughout blog even though I disabled it in the "marketing" tab?

15 hours ago, TheDetourEffect said:

@tuanphanany ideas as to why the "save" button still hovers over every image throughout blog even though I disabled it in the "marketing" tab?

Add to Design > Custom CSS

span[class*="PIN"] {
    display: none !important;
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

span[class*="PIN"] {
    display: none !important;
}

 

That worked!! Thank you! (But, it also took the save button off my actual pins. I have custom code inserted individually into every single pin that I created in Canva, so that a save button will hover on those specific blocks. It's only all the regular images throughout my site, which are just images and not pins designed for Pinterest, that I want the "save" button to stop hovering on. Oh well, maybe I can't have both).