Hi all,
We’re getting a new website designed and will have a recurring theme across most of our pages.
This involves the hero section that has a background image (which is a basic shape, like the one below) with the header text and CTA positioned around that shape.
I’m having real trouble getting the headings and button that is positioned around the background image to be responsive for different sized screens.
At present, I am using the symbol as a background image then using relative positioning to make the text appear nicely positioned. Unfortunately, this positioning does not hold as soon as I increase screen size (i.e. is not responsive - see below).
What is the best approach for making this responsive?
Here is my site Read-Only: https://preview.webflow.com/preview/driva-893a29?utm_medium=preview_link&utm_source=designer&utm_content=driva-893a29&preview=a6b3700f60c36a9e8913a1e1b3fd640a&pageId=5eeaed5dba225a2d949ac7ed&mode=preview
Here is my published link: https://driva-893a29.webflow.io/how-it-works