How to add responsive big text

Wappler General How To
#1

Hi guy, I don’t know if you remember but DMX used to have an extension for responsive text.
Is there a way to do this in Wappler ??

#2

This extension is not available in Wappler, but you can just use media queries to set different text size on different screen sizes.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

#3

Yes, I understand that, but there is a project I’m working on that would be great with the responsive text.
Is there now way of manually adding it?

#4

See this

1 Like
#5

No, but it’s really easy to style your text for different screen sizes using media queries.

1 Like
#6

I have used vw and vh with text to make it responsive, not sure if thats supported in wapplers, but it should be fine if edited within the stylesheet.

#7

Bootstrap v4.3 ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. RFS can be enabled by changing the $enable-responsive-font-sizes Sass variable to true and recompiling Bootstrap.

To support RFS, we use a Sass mixin to replace our normal font-size properties. Responsive font sizes will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior. More about RFS and its configuration can be found on its GitHub repository.

2 Likes
#8

Can responsive text now be done with the Theme Manager (Bootstrap 5)?

I want to have a header with an <h1> tag that resizes smaller for mobile. If not, how would I set the font size depending viewport size?

#9

Hi Brad, please check:

You can just set in your css

.h1 {
    font-size: 1.5em;
}
@media (min-width: 768px) { 
    .h1 {
    font-size: 1.75em;
}
}
@media (min-width: 992px) { 
    .h1 {
    font-size: 2em;
}
}

…etc.

#10

Thanks Teodor,

So what does Responsive Text Sizes in the Theme Manager do?

Screen Shot 2022-03-22 at 2.52.28 PM

#11
1 Like