▼
Streaming live at 10am (PST)

Hero section proportionality

Design help General
#1

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:

Screenshot 2021-01-17 at 00.13.30
Screenshot 2021-01-17 at 00.13.304512×2482 1.03 MB

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

#2

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

#3

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

CSS TRICKS

MDN

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
#4

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