CSS for overlapping text and an image

Hi everyone,

Is there a way to overlap text and an image, whilst keeping the same amount of letters/words per line as the screen gets smaller?

See screenshot

Essentially, the text box would forget about the image and keep moving across it.

I have played around with max-width but I can't seem to find the correct solution.

What I have managed to achieve is to get the text and image to overlap using z-index, but at 1387px the text box changes to one word per line, which I would like to avoid.

I know you can achieve this using the fluid editor, but I am trying to avoid this because of scaling issues on tablets and mobiles.

Anyway, thank you in advance for any and all help.

Here is the link to the page:

https://semicircle-nectarine-t42g.squarespace.com/

The password is 1234567890.

Steve.

On 11/15/2022 at 11:15 PM, SteveBarrett said:

Hi everyone,

 

Is there a way to overlap text and an image, whilst keeping the same amount of letters/words per line as the screen gets smaller?

 

See screenshot

 

Essentially, the text box would forget about the image and keep moving across it.

 

I have played around with max-width but I can't seem to find the correct solution.

 

What I have managed to achieve is to get the text and image to overlap using z-index, but at 1387px the text box changes to one word per line, which I would like to avoid.

 

I know you can achieve this using the fluid editor, but I am trying to avoid this because of scaling issues on tablets and mobiles.

 

Anyway, thank you in advance for any and all help.

 

Here is the link to the page:

 

https://semicircle-nectarine-t42g.squarespace.com/

 

The password is 1234567890.

 

Steve.

With fluid engine in squarespace version 7.1, you can drag and drop  the text block, image block any where on section. Have you tried it yet?