Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Pacific: How to control font size in mobile view?



On my site, I use the same font and font size for H1, H2 and H3. The only difference is the colour.

However, when viewed on mobile and tablet they are not the same size anymore.

Can anyone help? Is it a matter of using CSS? And if so, what is the code?

I don't have much experience using CSS...



Edited by Testing2134
Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 1

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.

Edited by kveldalf
Link to post
  • 0

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 post
  • 0

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;

Edited by benjamin
Link to post
  • 0

Too that, note that the "Hello" header is an h3, but the next section right below that is an h2, and then I saw and h2 section set in bold right near that even. Might've been intentional, but caught my eye.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...