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
  • Views 326
  • 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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.