Font scales down on 7.1 when I scale my browser up!?. How do I stop this!?

My font scales down in size when I reach a certain browser pixel size (roughly over 2000px wide). How do I stop this!? 

You can see in the attachments where the correct screenshot has the heading text set to 8.1rem and paragraph set to 1.2 rem but then all of a sudden in the incorrect screenshot it scales down? 

Help! Is there some custom code I can add to make sure my font never scales down?

16 hours ago, focuscreative said:

My font scales down in size when I reach a certain browser pixel size (roughly over 2000px wide). How do I stop this!? 

You can see in the attachments where the correct screenshot has the heading text set to 8.1rem and paragraph set to 1.2 rem but then all of a sudden in the incorrect screenshot it scales down? 

Help! Is there some custom code I can add to make sure my font never scales down?

Can you share your URL site so I can take a look?

Yes it is futurefocus.co - any help greatly appreciated! 😄

@Beyondspace any ideas? thank you so much!

I check when we scale down browser, font is set down

Have you figured it out yet?

Here is the calculation of font-size I check on your site

Does it match the style you set before?

No I haven't figured it out yet. It is a sqaurespace setting which I can not change. 

I need code to override it, so the font doesn't scale down. 

Quote

My font scales down in size when I reach a certain browser pixel size (roughly over 2000px wide). How do I stop this!?

I want to make sure I understand what you are experiencing.

If you make your browser window wider than about 2000px the font size shrinks?

I tried the above with your site and did not notice any issues. As I increased/decreased the width of browser window the font size went up and down relative to the browser window width.

Now when I increased the width to over 3179px, then the font did shrink.

At 3180px the following ruleset takes over control of the font-size.

@media screen and (min-width: 3180px) {
  h2 {
    font-size:calc(5.3 * 1rem)
  }
}

Which is a different calculation that is used at narrower viewport widths.

@media screen and (min-width: 768px ),screen and (max-width:calc(3180px - 1px)) and (orientation:landscape) {
  h2 {
    font-size:calc((5.3 - 1) * 1.2vw + 1rem)
  }
}

This almost looks like a bug in SS CSS code. I can understand perhaps capping the max size of the font but I can't see a reason to drop the size like the code does.

You could just move the calc from the second code to the upper code and put it in Custom CSS. As I say you may want to restrict the upper range of the font size.

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

  h2 {
  
    font-size : calc( ( 5.3 - 1 ) * 1.2vw + 1rem );
    
    }
    
  }

Let us know how it goes.

Hey! Thanks SO much for the reply. This is so weird, its like it has been fixed! I did flag it with SS the other week, I would be surprised they fixed something like that so quickly, but alas - it now seems to work, and you are right, just scales up and down as per the browser window now! 

V 🙂

39 minutes ago, focuscreative said:

its like it has been fixed!

I'm still seeing what I observed initially on your site. But as long as things are good for you, you are set!

A general note for those who might follow on, the fix I suggest is a workaround.