Streaming live at 10am (PST)

Need headline and image to fix to each other and to scale proportionately


#1

2 needs:
1. I want my headline and hero image to fix to each other and stay in the same relative position when browser scales up ad down.
2. I'd like my headline and hero [group] to scale down proportionally to fit smaller screens.

I have my hero image set to cover and positioned in center. My h1 text is placed in hero section.

total-width.webflow.io


#2

Can you share your public link so someone can take a look and try and help?


#3

https://preview.webflow.com/preview/total-width?preview=70bd35fba6191ce51279f64811a3c888


#4

Hi Kirk !

Here is one suggestion for you to try. There are several ways this can be done smile

p.s. I called the vw unit "vertical width", that is actually Viewport Width. I have vertical on the brain today smile

p.s. you can edit the text size in VW units at each viewport, if you want to make the text bigger or smaller at each viewport...

Cheers,
Dave


#5

WOW, what an awesome response…appreciate the video. I totally understand the text formatting.
Q: If I want the image to "follow" the text, should I mimic the formatting for the image so that the image and the text work as a unit?


#6

Hi @KirkC, I would have to look at it in the designer, but basically yes. In the original case, you are using the image as a background, so if you want the image and text to be "in-sync" then I would use an image widget, not use the image as a background.

How exactly do you want the image to follow the text ? I am not so clear on what that means really wink

Cheers,
Dave


#7

https://preview.webflow.com/preview/total-width?preview=70bd35fba6191ce51279f64811a3c888

Sorry…hard to explain without images…So I want the elements in the header to act as a unit. Say…like you would do in a page layout program like InDesign. I would group all of the elements in the header section—Hero image, Hero text and logo and in the page layout program, If I scaled the grouped elements, they would scale proportionally and keep their original layout—just smaller or larger. In the website that I'm building, it's important that the hero text be in an exact position with the welder guy because it is part of an established brand. It won't work if the text and image is able to float around. Hope this helps.


Scale wrapper (with child elements in it) proportionally
#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.