Making div/everything inside div responsive

Hey! So i’m having some trouble making my homepage heading section responsive.

What I have: Basically I have a div that holds a link block that holds all of the elements (main heading and 4 separate colored div blocks layered underneath for design). Then I have the subheading “productions, projects…” after that on the same level as the link block (as opposed to adding it within the link block with the other elements)

What I want to do: I want to make it so that all the elements are responsive. So they have fixed proportions and get smaller and bigger depending on the viewport, but hold their placement relative to the heading text. The 4 colored divs are should be underlying the main “doghouse” heading, but it should also keep its placement whenever i make the screen smaller…

So I’ve been experimenting with display settings and positions and vw/vh/px sizing and I just can’t find the right answer. Any help would be appreciated!


Here is my site Read-Only: https://preview.webflow.com/preview/doghouse?utm_source=doghouse&preview=641c8eb134dc6c739a266363a57a262c

In general only by Custom code you keep the ratio (This trick is for pro user. You should know basic CSS/JS)

-or- google it

Anyway - in your case for the heading - no need for such complex code (Tweak the design in each breakpoint and thats it - zero users will notice something wrong her).