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) {   p { font-size: 15px !important; }}


MOBILE MODS.jpg

Ready for more?

Then today is your lucky day! I just put the finishing touches on my new guide to Mobile Modifications. It contains over 20+ CSS codes specific for the mobile version of your Squarespace website, and you can download it right now!