Max-font-size custom CSS

Design help Custom code
1

Hi Webflowers,

Having a hard time troubleshooting this custom code solution for a max-font-size property I am trying to apply to .bodytext.project-details on my Webflow page projects. I’ve inserted the code below into the Before </body> section of the page’s settings.

<style>

.bodytext.project-details {
  font-size: 2.2vw;
}
@media screen and (max-width: 1600px) {
  .bodytext.project-details {
     font-size: 35.2px;
  }
}

</style>

I modified the code from this source.

My intended functionality is for the font-size to max out at 35.2px (2.2% of 1600px) at a viewport width of 1600px. This way the transition to the responsive font-size to the static font-size is seamless. It is at 1600px because I subjectively decided that was the point after which the letters get too crowded.

Update: Realized I am now having the exact problem they talk about in the source of the original code whereby on smaller screen sizes the breakpoint I have set in Webflow to change the fontsize from 2.2VW to a static font-size to prevent it cramming on mobile - are being overridden by the custom CSS… I am not totally able to follow what the solution was in forum… is there a simple why to resolve this by adding some specification to the media query in this style tag?

READ ONLY LINK

2

Hey there @npfosi,

Your custom code is css which needs to be inside <style> element and not in a <script> element.

1 Like
3

Ahh wow totally just wasn’t paying attention! Let me see if that fixes it…

4

@avivtech okay I fixed that but it still isn’t functioning…

5

max-width means that your code inside that bracket will be applied to anything up to that size.
So your code says that any screen 1600px and smaller will have a 35.2 px font size.
Any screen bigger will have a 2.2vw font.

This is what you want to achieve?

1 Like
6

Oh okay… thanks for helping me understand this. I want it to be the other way around. Anything 1600px or greater would be 35.2px. So maybe I should change the (max-width: 1600px) to (min-width: 1600px)?

Tried it - yes I have achieved the functionality I want but now I am having a different problem whereas the font-size: 2.2vw needs to change to font-size: 20px at the iPad breakpoint. This is set up that way in Webflow already but is likely being overrode by the custom CSS. Is there a straightforward way to set a kind of lower bound for the application of the font-size change?

1 Like
7

Can you rephrase that? I am having trouble understanding :sweat_smile:

8

I have to say I was having a hard time phrasing it myself… basically, the functionality I want to have is below whatever breakpoint the Webflow iPad thing is (970px or something right?) the font-size would be 20px fixed, not 2.2 vw… so at 1600px vw and wider it’s 35.2 px… at ~970px and below, it’s 20px… between those two is the only time when it’s 2.2vw.

9

You basically want to have one more break-point at 1600px.
So use only the @media query for 1600 and wider in your custom code. All other properties edit normally with webflow.

10

Can you elaborate on what you are suggesting? Because it seems as if the CSS being applied by Webflow isn’t working correctly (notice how if you resize the browser the text continues to scale with the viewport width, not stopping at any viewport width besides 1600px, of course.

11

  • Use the custom code like this:

    @media screen and (max-width: 1600px) {
    .bodytext.project-details {
    font-size: 35.2px;
    }
    }

  • At the desktop (Anything wider than 991px) breakpoint define 2.2vw (Since you created another break-point with custom code, it will stop at 1600px)

  • And at Tablet (991px and narrower) define 20px

1 Like
12

That’s exactly what I have done and you can check, maybe I’m confused, with my read-only link. But it doesn’t seem to be working.

Unless you are suggesting I delete .bodytext.project-details { font-size: 2.2vw; } from the CSS?

1 Like
13

This part of the custom code overrides all others and gives your element 2.2vw at all times except 1600 and wider

1 Like
14

Yes, exactly :smiley:

1 Like