Overlapping contents in Flex

Elements
1

Hello, Im new to Elements. Im fairly ok with Rapidweaver.

I have a question. Im trying to overlap an image and text in a flex box.

I have the image first, centred. Then the text and the flexbox in a column format. I set the text top margin to -100px. It shows correct in the viewing window but we i view in browser the text is underneath the image. The flex box is in a container.

edit… Ive also tried with flex…just a container, also in a background element. The same result.

The display shows what i want but the preview in browser doesnt.

Thank you.

Chris

2

not sure if this is what you were trying

3

Its kind of right but the items are off differnt widths.

Here is the image of the app…
https://imgur.com/a/eLBZ4qI

and this is the result in the browser.

https://imgur.com/a/eLBZ4qI

Thanks again.

4

Can you share the project via Elements Cloud? We can then take a look and show you how to get the layout you want :slight_smile:

5

Yeah…i’ll give it a go. its really a test project to recreate my website i made in Rapidweaver with Foundry 3 as a way of getting to know Elements.

elementsapp://downloadDocument/ySvt9gCarMol

Is that what you need?

The rapidweaver site is at www.seriouslycollins.com

Chris

6

is this what you need

project here

elementsapp://downloadDocument/qbeodcpieBxW

I reset the flex image and text and then just used the transform on the text component

7

Yeah…i think thats spot on.

Thank you.

1 Like
8

the only issue will be responsive size of text

I changed the image to px and changed text for each screen size

https://share.cleanshot.com/w7Ksgm87jgmX7j5TGwBV

9

Hi Steve, Thank you…i just worked that out too…change by break point but also translate by % seems to do it also.

Thank you so much for your help.

1 Like
10

Lots of ways to do it