Jump to content

Pagination link too long - how to break just this one word on mobile

Recommended Posts

Site URL: https://www.welcome-to-utopia.de/blog/blog-post-nine-kn2al-t0WSV

Hello,

I attached a screenshot for better understanding...

The word "Pilzwurzelrevolution" is too long for a small screen.

I would like to break just this one word so it shows like this:

Pilzwurzel-
revolution

anytime the screen get's too small.

Any idea how i can target this?
I only know how to break the word using ­  but now Idea how to target this blog title / pagination link...

Thank you.

Bildschirmfoto 2021-10-23 um 16.28.06.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

On 10/23/2021 at 3:47 PM, ka_scal said:

The word "Pilzwurzelrevolution" is too long for a small screen. I would like to break just this one word

You can add the following to prevent the title overflowing its container and hyphenate it automatically. The browser is free to break words at appropriate hyphenation points, following whatever rules it chooses.

.item-pagination-link .item-pagination-title {
  word-break: break-word;
  word-wrap: break-word;
}

Notes:

  1. This 'code' is CSS. Add to Design > Custom CSS.
  2. An example of the code being used is shown below.

1126299231_Screenshot2021-10-23at17_21_13.png.99fae510ddb59ad602541fdcd285943e.png

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Edited by paul2009
Updated

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Hi Paul,

when I added the suggested code, the result in the backend is perfectly fine. But when I open the life site on my mobile the word is not breaking, even if the content box is obviously too small for the content (see screenshot). Any idea how to solve this?

Thank you.

67bea6d2-0e5b-4c7f-b545-4253f654a960.JPG

Link to comment

I have updated. Please try again.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.