It's not you, it's me: Bootstrap 4.3.1/RFS not generating media query at sub 1200px threshold about rfs

[megalofauna]

@MartijnCuppens Thank you!

No, you didn't overlook it at all. I just needed to RTFM.

The issue, for me, turns out to be quite simple and a little embarrassing. I was using a custom variables.scss file to override bootstrap and I didn't update that file when I updated Bootstrap. Thus. I didn't have the $enable-responsive-font-size boolean available to me in that file.

It was stuck in the off position as the updated Bootstrap source variables.scss file had that value set to false.

Closing with much appreciation!

[megalofauna]

#33 (comment)

@yudyananda - did you figure out what changed that caused successful generation of the media query in your environment?

[yudyananda]

@megalofauna I'm not sure if I can help you because I don't use npm to compile scss or sass, but in my case I have to restart the localhost server. Can I see your repo?

[megalofauna]

Can I see your repo?

I wish. We're locked down tighter than an oil drum over here. Thanks, though!

[MartijnCuppens]

Hi @megalofauna,

You should enable RFS with $enable-responsive-font-sizes: true like explained in the docs (https://getbootstrap.com/docs/4.3/content/typography/#responsive-font-sizes):

RFS can be enabled by changing the $enable-responsive-font-sizes Sass variable to true and recompiling Bootstrap.

And in the release blog article (https://blog.getbootstrap.com/2019/02/11/bootstrap-4-3-0/#introducing-responsive-font-sizes):

Disabled by default, you can opt into this new behavior by toggling the $enable-responsive-font-sizes boolean variable.

Did you look over this or did we miss mentioning this anywhere else?

The reason we did this is because we want to "soft launch" RFS in v4 in case we need to tweak things for Bootstrap 5.

[nimajnebp]

@include rfs($some-font-size)

where $some-font-size <= $rfs-base-font-size

it will also not get a fluid font size. You need to adjust your $rfs-base-font-size to have rfs() generate fluid font sizes.