How to Adjust Mobile Font Size using Custom CSS

 
 

One of the great things about Squarespace is how easy they make it to build a website that looks great on mobile. Their website builder automatically adjusts things like images and text and 99% of the time I am happy with the result. However, I personally like to have a little more control over how my website looks on a mobile device, specifically with the way fonts are shown! This weeks tutorial shows you how to adjust font size specifically on mobile devices, and breaks the code down so you can understand exactly how it works. Check out the video below, and when you are ready, copy and paste codes are below!

Codes to Adjust Mobile Font Size

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

@media only screen and (max-width: 640px) {   h2 { font-size: 30px !important; }}

@media only screen and (max-width: 640px) {   h3 { font-size: 20px !important; }}

@media only screen and (max-width: 640px) {   body { font-size: 15px !important; }}

That’s all for today’s tutorial folks! I try to upload a new Squarespace tutorial every week. If you want to be notified when I post one, be sure to sign up for my email list below!