Streaming live at 10am (PST)

Text Resize Button

#1

Hi everyone,

My question is: how can I make a smaller/larger text-size buttons using jv or, better, webflow interactions?

Thank you!

1 Like
#2

Hello @Elyas

Can you explain more about what you’re trying to achieve? Hover effect?

Piter :webflow_heart:

1 Like
#3

Hi Piter,

I’m now working on my blog page, and thought that the text size might be small to read for some people.

So I was looking for a way to create this button, but I don’t have much of JavaScript knowledge.

See the image below for an example.
image

Thanks!

1 Like
#4

Ouuu I see. You want people to have the option to change the text size for the whole site.

1 Like
#5

Not exactly, the blog text only. :slight_smile:

1 Like
#6

I’ve made something > https://font-size-button.webflow.io/

Keep in mind that I’m not a code master :smile: Just trying some things from the internet. The solution you see here is increasing or decreasing the font size for elements with a class of p-blog-post. You can see that the line height is not changing so this is a problem.

2 Likes
#7

If you set the line height to 1.5 (Relative unit) for example instead of fix size (24px) you solve the “line-height” problem.

image

p {
    line-height: 1.5; /* Computed line-height: 24px (1.5 * 16px) */
}
2 Likes
#8

Brooo! Thanks for this! You da best :smile: Learned something today :partying_face:

2 Likes
#9

That’s perfect, Piter!

Can I have the read-only link?

1 Like
#10

lol i love this as the parameters for your str_replace function: haystack, needle, replacement

clever :slight_smile:

#11

Sure! https://webflow.com/website/Font-resize-buttons

1 Like
#12

Thanks a lot, man!
Really appreciate the help. :smiling_face_with_three_hearts:

1 Like
#13

Please mark @PiterDimitrov main answer as solution (For future searches about this topic). Thanks

1 Like