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
  • Views 609
  • Created
  • Last Reply
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  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.