How to Make Your Text More Mobile Friendly on Your Squarespace Website

Having a mobile-friendly website is super important for any business. Search Engines prioritize websites that provide a great user experience. Part of that is providing a website that is responsive to different screen sizes.

Squarespace does a good job at altering websites to fit different screen sizes. However, there are some things you can do to make your site even more mobile friendly!

This video shows how to make your text more mobile friendly. All of the code used in the video is provided below.

The following code is used in the video.

Get Rid of Hyphenation

h1, h2, h3, p {
  hyphens: none;
}

Mobile and Tablet Breakpoints

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* Insert Code for Mobile Above This Line */
}

Font Sizes

h1 { 
  font-size: 60px; 
}
h2 { 
  font-size: 30px; 
}
h3 { 
  font-size: 22px; 
}
p { 
  font-size: 20px; 
}
.sqs-block-button .sqs-block-button-element--large { 
  font-size: 16px; 
}
.sqs-block-button .sqs-block-button-element--medium { 
  font-size: 14px; 
}
.sqs-block-button .sqs-block-button-element--small { 
  font-size: 12px; 
}

Here are some other posts you may like:

• How To Make The Mobile Navigation Display On Top Of The Header Image

• Styling the Links in the Footer of Your Squarespace Website

• How To Add A Custom Font To Your Squarespace Website