Jump to content

Pacific: How to control font size in mobile view?

Recommended Posts

  • Replies 8
  • Views 7.9k
  • Created
  • Last Reply

Great question!

Do you have a test page we can look at?

First thoughts will would be to test behavior in different viewport/screen sizes using Chrome DevTools or similar. If one of the H tags is changing upon resizing, I’d target that one and notice its behavior in DevTools and see what’s going on and test various settings to override the media query that’s changing your H tag in question.

If I couldn’t resolve with the standard Squarespace styling panel, then yes, you can either add custom CSS through the standard user panel (Design > Custom CSS), or lastly even put the site in developer mode and do it in one of the .less files. You mentioned you’re not super experienced yet with CSS, so putting in dev mode on a site you care about might not be the best move unless you back it up.

Note: I don’t have a site opened up to apply this template to at the moment, so looking at yours is just easier at this point for me at the moment.

Link to comment

Tusind tak!

A few things catch my eye. Yes, there are media queries at play that are resizing the H* tags upon resize, looks like one begins at 768px, and another at 480px (pretty common). The idea is that if your 1em is say 16px and your H1 is 300% (48px = 3em), your H2 at 150% (24px = 1.5em), then on mobile, these would all relatively decrease as the screen size decreases but the proportion remains the same. That is, 48px on an iPhone is pretty big. That all said, you can override the media queries by writing your own or editing the ones given in the theme.

You can either do this in Design > Custom CSS, or put the site in developer mode and actually tinker with the LESS files, or even write your own and import. Note, be sure to back up originals, document any changes (copy original code & comment out) in case you need to restore or read later.

You didn't ask, but the site seems to load very slowly. Initiail thoughts would be image sizes to see if they're as optimized as can be.


Link to comment

Copy and paste into Design > Custom CSS

just change the font-size:value to whatever size you wish those to display on mobiles.

  @media only screen and (max-width: 768px) {

   .index-section-wrapper .content.has-main-image h1:not(.OT_subtitle){

   .index-section-wrapper .content.has-main-image h2:not(.OT_subtitle) {
       font-size: 25px !important;

   .index-section-wrapper .content.has-main-image h3:not(.OT_subtitle) {
       font-size:25px !important;

Link to comment


This topic is now archived and is closed to further replies.

  • 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.