Hi,
I have a problem with custom CSS code to set a maximum font size. I’m trying to keep it simple so this is what I want: below 1453px the text should be 1.64vw. On screens that are wider than 1452px the text should be 24px. I can do anything, the custom CSS never ovverrides the font size set in the “normal Webflow way”.
This is the code I put in the before body tag when the normal text size was set to 1.64vw:
<style>
@media screen and (min-width: 1453px) {
.HeroH3 {
font-size: 24px;
}
}
</style>
And this is another one when the normal-way setting was inherited:
<style>
@media screen and (min-width: 1453px) {
.HeroH3 {
font-size: 24px;
}
}
@media screen and (max-width: 1452px) {
.HeroH3 {
font-size: 1.64vw;
}
}
</style>
Thanks for help in advance.
Hey @Pepszi did you notice that Webflow added larger and custom breakpoint sizes recently? Maybe you can use that:
1 Like
Hi, I know, but what does it have to do with my problem?
I think what @jackwabbit is suggesting is that you can do what you want in webflow rather than coding it implicitly in custom code. i.e. set your custom breakpoint value (1452px) and then change the font size. Everything above the standard screensizes will be true for viewports above your breakpoint, unless you override them with additional changes.
Perhaps this will make your responsive text size issue go away?
Let us know how you get on.
2 Likes
Oh yeah, it solved my problem, but not exactly the way you wrote it because I couldn’t set a custom value (am I blind?). However, I created an 1440px breakpoint, made the settings and now it’s good:)
1 Like
