Jump to content

How to override text scaling on mobile for 7.1

Recommended Posts

I've used text scaling for my H1 text at the top of my website (hero), but it doesn't translate well to mobile. I'd prefer the text break to two lines and maintain the H1 without scaling. Appreciate the help!

The text I'm referring to is "Accounting is boring."

Also, would love help on how to maintain button padding on mobile (that's not translating to mobile well either).

Thanks!

Screen Shot 2022-12-29 at 12.14.50 PM.png

Screen Shot 2022-12-29 at 12.15.22 PM.png

Screen Shot 2022-12-29 at 12.16.50 PM.png

Screen Shot 2022-12-29 at 12.17.09 PM.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

If you're using the Fluid Engine grid layout, the desktop view and the mobile view can be individually edited. As for the scaling text.

My suggestion would be to use a code specifically for mobile to prevent the text from scaling. Could trying using something like :

@media only screen and (max-width: 749px){
h1 {
font-size: 48px !important;
	}
}

 

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.