Hero section proportionality

Hi everyone, hope you’re all safe and healthy :blush:

I could really use some help as I’ve been puzzling over this all day!

When the browser is resized, I’d like all the elements in the hero section to stay proportional to one-another, so that everything scales together and doesn’t shift out of alignment on desktop.

Ideally so that the heading text always slightly overlaps the pink background colour in the way shown here:

If anyone could advise, I’d be super grateful! I’ve probably bitten off a bit more than I can chew here, this is my first proper attempt at a site build :upside_down_face:

Here’s the staging link: https://unfauxgettable.webflow.io/

Here is my site Read-Only: Webflow - Unfauxgettable

I thought maybe changing all my text and padding etc. to ems using this might help: responsive-webflow-style-guide-clone-remove-unwanted-webflow-styles - Webflow

…but my text isn’t resizing either and I’m 100% certain it’s something really silly. Any ideas anyone?

Do you think the issue is due to

hi @GRD you can try new CSS feature clamp() to resize fonts accordingly to vw.



Here is an example

:root {
  --giant-title-1: clamp(5.6rem, 1rem + 3.58vw, 6.4rem);
  --giant-title-2: clamp(3.5rem, 1rem + 3.3vw, 5.4rem);
  --giant-title-3: clamp(2.8rem, 1rem + 2.8vw, 4rem);
  --giant-title-4: clamp(3.3rem, 1rem + 5vw, 4rem);
  --giant-title-5: clamp(2.5rem, 0.85rem + 5vw, 4.25rem);
  --giant-title-6: clamp(1rem, 0.85rem + 4vw, 3rem);

  --h1: clamp(1.8rem, 1rem + 3.4vw, 3.6rem);
  --h2: clamp(1.6rem, 1rem + 2.06vw, 2rem);
  --h3: clamp(1.4rem, 1rem, 2.6rem);
  --h4: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  --supportive: clamp(1.1rem, 1.5vw, 3.6rem);
1 Like

Oh very cool! Thanks Stan. I guess I’d have to do that with custom code?

It was all becoming a bit OTT so rather than puzzle more, I’ve adjusted the design and it works much better now.

1 Like