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

Thanks!

http://wichmannschmidt.com

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.

I'm not sure how to do a test page, so it's now live ... Here's the address: http://wichmannschmidt.com

Thanks!!

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.

mvh

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

   .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;
   }
}

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.

they're not being used as sizes, just colours. h1 white, h2 yellow etc.

As far as I can tell this resizes all the h elements on the page to be 25px below 768px. Let me know if I missed one or this wasn't what you were after

Thanks both of you! I think the code works nicely. Do let me know what you think. On my mobile as well as laptop I have no issues with the site being slow...

Looks like it is working, mark question as answered thanks.