Jump to content

Unable to center monospace text on mobile

Recommended Posts

Site URL: https://bold-and-badass.squarespace.com/



I'm trying to centre all text & buttons on mobile for this website:



Here is the code I've used:

//centre all text on mobile//
@media only screen and (max-width: 480px) {
monospace, monospace, p, H1, H2, H3 { text-align: center !important; }}

//centre buttons on mobile//
@media(max-width: 1220px) {
.sqs-block-button .sqs-block-button-container--left {
    text-align: center;

However, when I use this code, all monospace text that's left aligned on desktop/laptop, doesn't appear centered on mobile. 

This issue occurs on all website pages.

Is there a workaround/fix for this?


Screenshot examples attached.


I've also tried adding '*' for all text in the css above, but that caused issues with the placement of some images blocks and shifted some images over to the center of the page with the right side of some images cutting off.



Edited by Kate_B
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.