Responsive text using "clamp"

Design help Custom code
1

Hi all, I develop websites for several years but I’m new to Webflow. I have a question about using “clamp” with Webflow. I have placed HTML Embed into body to apply custom styling some things are working. I have set :root with my variables but I can’t make clamp to work

  --text: clamp(0.65rem, 0.65rem + 1vw, 1.2rem);
  --large-text: clamp(2.1rem, 1rem + 3vw, 4rem);

Can someone point me to right direction?

1 Like
2

Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.

If your project has custom code or layout issues on the published site, please share that URI as well.

3

Thanks to let me know. Here is link to this project.
https://preview.webflow.com/preview/finediv-studio?utm_medium=preview_link&utm_source=designer&utm_content=finediv-studio&preview=855775e26cd4eb8b12c8fa08d13e70c4&mode=preview

4

For now I have changed font size with queries but I would like to make it work as it work on my standard dev version on my comp.

5

I was looking to debug the issue but now I am not sure where to look. If you removed the custom code maybe you could try to implement it on a test page you could share. Or I missed it.

6

No, custom code is still there. As I said I’m new to Webflow so mayby I place it into wrong place!
Screenshot 2020-07-27 at 14.42.36|690x370

7

Missed the obvious HTML Embed! Mind sharing a published URL (publish project) so I can inspect the rendered HTML?

8

https://finediv-studio.webflow.io

9

I can send you dev invitation if it will help.

10

On your published site I looked at the first .hero-heading element and your custom CSS is being applied. You can see it in dev tools styles as well as calculated (when resizing the page).

11

Hi Jeff thanks for look on this issue that point me right direction. I found where was problem. Title in header works some way but rest of titles didn’t. The problem was that I had other class after H1 large heading after removing this class they start to be responsive.

If I can ask, what or more likely where I should set base font size when using “clamp”? For now I have to change font size on each heading font size to 16px to calculate size properly. Is it right way how to do it or there is better way for “clamp”?

I have last OT question. Im my process in text editor I use to set basic style for mobile device and inherit from there to be able to use only @media (min-width: xxxpx) I know that Webflow does it opposite way and inherit from desktop. Is there option to reverse inheriting so I can apply my workflow? I can open for this question a new tread if answering here will breaking some forum rule.

Thanks

12

Stan . I have built a couple of sites with Webflow and as far as I know it is Desktop First NOT Mobile first. I Do not know of a way to change that. I don’t think that you can.
“Clamp” is new. I do not know the answer.
A big Welcome to the Webflow community!!!

13

Thanks, Harris for your time to answer. My issue with Clamp is sorted but I need to look on it closely for best practice. I know that Webflow is desktop first but as I said I’m developing outside of Webflow mobile-first and inherit from there. My workflow of what and how to do next step is set in my brain like that and is easier for me to thing upfront this way. However, it’s not a big deal but it will be nice if there will be an option to set it the way I use to work. Honestly, I didn’t have time to look on it since as I’m busy with another project but I will look more deeply into Webflow workflow to learn how things work here, btw. nice platform. For now, I’m much faster in VSCode.

14

Maybe using an embed with this code:

<style>
body {
	font-size: 18px;
  font-size: clamp(16px, 2.5vmin, 18px);
}
h1 {
	font-size: 2.5rem;
  font-size: clamp(1.75rem, 5vmin, 2.5rem);
}
h2 {
	font-size: 2rem;
  font-size: clamp(1.5rem, 4vmin, 2rem);
}
h3 {
	font-size: 1.75rem;
  font-size: clamp(1.2rem, 3.5vmin, 1.75rem);
}
h4 {
	font-size: 1.5rem;
  font-size: clamp(1.1rem, 3vmin, 1.5rem);
}
h5 {
	font-size: 1.2rem;
  font-size: clamp(1rem, 2.5vmin, 1.2rem);
}
</style>

Here an example: fluid typography
See on mobile

1 Like
15

hi @Fernando_Comet for input even my request was solved 1 year ago by removing extra CSS class I had on heading as I have mentioned in solution. Anyway I am convinced that someone who is new to clamp will find you snipped useful. :vulcan_salute:

1 Like
16

Yes indeed! This helps. I am just coming from VScode myself and am struggling with applying custom code. Setting basic css stuff on “body” is something I need to figure out the next few days.