How to change font size on mobile on Squarespace
Having a mobile friendly website is now very important for any business moving forward. So greater emphasis must be placed on providing a great user experience as Search Engines prioritise website that account for this, by looking at how your website responds when being viewed from a mobile device.
In this tutorial, I will show you how to resize font sizes on Squarespace for mobile screens.
Complexity: Easy
To change font size on Squarespace for mobile screens, simply copy the code below:
Mobile Breakpoints
/* CSS FOR TABLET */
@media only screen and (min-width: 641px) and (max-width: 949px) {
/* Start Insert Code for Tablet*/
/* End Insert Code for Tablet */
}
/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/
/* End Insert Code for Mobile*/
}
Use this code to resize font size
// Header h1
h1 {font-size:1rem !important}
// Header h2
h2 {font-size:1rem !important}
// Header h3
h3 {font-size:1rem !important}
// Paragraph
p {font-size:1rem !important}
For a full working example which you will paste in your Design > Custom CSS is shown below:
/* CSS FOR TABLET */
@media only screen and (min-width: 641px) and (max-width: 949px)) {
/* Start Insert Code for Tablet*/
// Header h1
h1 {font-size:1rem !important}
// Header h2
h2 {font-size:1rem !important}
// Header h3
h3 {font-size:1rem !important}
// Paragraph
p {font-size:1rem!important}
/* End Insert Code for Tablet */
}
/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/
// Header h1
h1 {font-size:1rem !important}
// Header h2
h2 {font-size:1rem!important}
// Header h3
h3 {font-size:1rem !important}
// Paragraph
p {font-size:1rem !important}
/* End Insert Code for Mobile*/
}From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box. You can then adjust the font-size value to your desire size e.g ‘font-size: 1rem ! important’ to ‘font-size: 0.5rem ! important‘.
