Jump to content

Text Wrapping Issue on Mobile Site

Recommended Posts

Hello!

My image titles are wrapping mid-word on the mobile version of my site. I don't want to make the titles smaller because on the desktop version, the large text size is necessary for the design and would look awkward otherwise. Is there a setting to make text auto-resize on mobile rather than break up titles in the middle of a word?

IMG_2850.jpeg

IMG_2849.jpeg

Link to comment
  • Replies 4
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

 

Hello!

To address the issue of image titles wrapping mid-word on the mobile version of your site without reducing the text size, you can consider using CSS media queries and the overflow-wrap property.

  • The default styles for your image titles are set, including the desired font size.
  • The overflow-wrap: break-word; property is used to allow word wrapping under normal circumstances.
  • Inside a media query for screens with a maximum width of 600 pixels (you can adjust this value based on your needs for mobile responsiveness), the font-size is set to auto, which lets the browser adjust the font size based on available space.
  • white-space: nowrap; prevents the text from wrapping, and overflow: hidden; hides any overflow content that doesn't fit within the designated space.

This way, on mobile devices, the font size can be adjusted automatically, and the titles won't break mid-word, while on larger screens, the specified font size is maintained. Adjust the values as needed to suit your design preferences.

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.