Brine Header Mobile Scaling

Site URL: https://rafida.org

Hey,

On our BRINE website, when viewing in mobile view, our 'Heading 1', which is our largest font used for titles becomes very small. Much smaller than it needs to be. I can see that on the BRINE template there is no scaling option for headings in the site styles section.

Is there any way I can control the mobile scaling for headings through code?

I've provided two screenshots showing you the different in text scale on desktop and mobile.

Website access:
rafida.org
pass: lastphasetesting3

Thanks!

Can anyone help us fix this with code?

Add the following to your CSS.

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

  h1 {

    font-size: 64px;
    
    }
  }

This is for a 7.0 site using the Brine template.

This seemed to have worked. Thanks a lot!

Also, how do I check if our site is 7.0 or 7.1, as this code seemed to work, and I thought we were on 7.1

Go to Home > Help. At the bottom of the Help Center the version of SS you are using for the site will be displayed.

Brine is a template for SS v7.0.

Thanks! We're actually starting to build a second website from scratch. Do you recommend using 7.1 or 7.0 for a multilingual website? I've read there's a lot of missing features still on 7.1

I don't think v7.0 or v7.1 will make much difference for the multilingual aspect of your site(s). Take a look at Creating a multilingual site in Squarespace.

So the core question is what features do you need for your site(s) and what version of SS will best meet your needs. I can't say one version of SS is better than the other overall. They each have their pros and cons.

If you have specific questions about features of each version of SS I suggest asking new questions.