Jump to content

Overlapping text on text blocks when responsive scaling decreases for smaller screens

Recommended Posts

Site URL: https://butterfly-clover-xpmk.squarespace.com/

I'm having trouble trying to figure out how to prevent the text from overlapping when the site scales down for smaller screen devices. First 

image.png.ee468ca28eb88292f1ac6a029e3b00c0.png

I wanted the 'Membership and passes' text to wrap within the confines of the column, like it does in editor view (see image below). For some reason it doesn't do this in production!

Help is much appreciated:

image.thumb.png.2944eda29da75a39fbd17e9c012c15d5.png

Link to comment
  • Replies 4
  • Views 751
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 10/4/2021 at 10:55 AM, LingL said:

Hi Tuanphan - I've published the page and you can see it at '/home'. thank you.

Add to Design > Custom CSS. The code run from 768px to 1024px. You can adjust these numbers

/* Home text break */
@media screen and (max-width:1024px) and (min-width:768px) {
div#block-ac2983fffb585b3224a3 h1 {
    font-size: 40px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.