Jump to content

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

Recommended Posts

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?

Correct- Screen Shot 2023-02-01 at 10.43.44 am.png

Incorrect - Screen Shot 2023-02-01 at 10.44.02 am.png

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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?

Correct- Screen Shot 2023-02-01 at 10.43.44 am.png

Incorrect - Screen Shot 2023-02-01 at 10.44.02 am.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

image.thumb.png.75548ad263c16d145f6d80d399d20a7f.png

image.thumb.png.c2bdfc85f252669174270c65ac6a4070.png

Have you figured it out yet?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

image.thumb.png.dac01db19fec0482959a740687b6b11b.png

Does it match the style you set before?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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 🙂

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

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


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