Jump to content

How to reduce size of all mobile fonts?

Go to solution Solved by Guest,

Recommended Posts

I've about got my website the way I like, using the Aviator template, but on a mobile phone, the font size, which is quite comfortable on a desktop monitor, is kind of huge. As the mobile styles already change many things, I figure there might be some way of saying, "Do all the stuff you always do for mobile devices, but make all the fonts 70% of the regular mobile size, please."

For reference, my website, on a page other than the Info Page so you can see the problem: http://www.withinsight-therapy.com/what-we-offer/

Edited by chriscc
retag
Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Sorry:


@media only screen and (min-width: 1025px) {

 #main-navigation {
 background: rgba(101, 89, 60, 0.9);
 width:15%;
 }

} 

#main-navigation {
 background: rgba(101, 89, 60, 0.9) 
     }

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

  h1 {
      font-size: 28px;
  }

  h2 {
      font-size: 24px;
  }

  h3 {
      font-size: 20px;
  }

  blockquote {
      font-size: 16px !important;
  }

}

Edited by Mournfuldog
Link to comment
  • 2 years later...

If you also want to change the weight of the font on mobile, you can use something like this:


@media screen and (max-width: 640px) {
   p {
     font-weight: 300;
   }
}

Replacing

300;

with your own value.

Hope this helps!

Link to comment
  • 9 months later...
  • 11 months later...

This worked great for me! Thanks @NickBrit @HarryBrown

Do you know how to target the links in a mobile overlay navigation? I set my mobile breakpoint super high so I always have the mobile navigation active. Trying to use a large font for the desktop nav but would like to make it small for mobile. Using Brine as the template.

Link to comment
  • 4 weeks later...
  • 1 year later...
1 hour ago, aleithialow said:

hi! How do you make this work, but just for specific pages? For example, I used h1 as the style for overlay text on my web banner, and want to reduce font size for mobile, without affecting other h1 text on the rest of the site.

@aleithialow page settings > advanced > page header code injection 

Add <style>PASTE CODE HERE</style>

This will target only that specific page with the code instead of the whole site.

https://support.squarespace.com/hc/en-us/articles/205815908-Using-Code-Injection

Let me know if this helped!

Link to comment
  • 2 months later...

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.