Jump to content

CSS for overlapping text and an image

Recommended Posts

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.

Screenshot 2022-11-15 at 15.58.11.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Screenshot 2022-11-15 at 15.58.11.png

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.