Jump to content

Text overflowing on mobile

Recommended Posts

  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi @visionsbyfurks

The issue is that you're using a very large font.

An easy fix would be to reduce the font size on mobile, for example by targeting the block and using CSS media queries like so:

@media (max-width: YOURMAXWIDTH) {
  #block-61c8eac2720fa036c70b804d h1 {
    font-size: 22vw;
    white-space: normal!important;
  }
}

I would suggest 22vw as that produces the below result which works well and scales responsively.

And a max-width of 640px. But you may wish to choose a different breakpoint.

image.png.4760b417c94bd84726b9c83c353d0241.png

I would also consider changing the "white-space" property so that the text correctly centers.

Here's an example of how I achieved the above.

@media (max-width: 640px) {
  #block-61c8eac2720fa036c70b804d h1 {
    font-size: 22vw;
    white-space: normal!important;
  }
}

 

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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.