CSS for overlapping text and images

Hello everyone,

I'm looking for a way to overlap text and an image, whilst keeping the same amount of letters/words per line as the screen gets smaller?

The screenshot with the red box highlights how I would like the text to remain while the screen gets smaller

The screenshot with the blue box highlights how the text is currently acting while the screen gets smaller, and I would like to change this.

Essentially, I'd like the text box to forget about the image and keep moving across it as the screen gets smaller.

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, like in the screenshot with the blue box, which I would like to avoid.

I know you can achieve this using the fluid editor, but that solution causes 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.

It looks like you have a max-width applied to the h1 in the block, but you've limited the block with in the layout to 50% (col-6) why not make that text block full width if you're going to control the max-width with CSS? That should give you a better solution.

12 hours ago, Ziggy said:

It looks like you have a max-width applied to the h1 in the block, but you've limited the block with in the layout to 50% (col-6) why not make that text block full width if you're going to control the max-width with CSS? That should give you a better solution.

Hi, Ziggy.

Because I want the text and image to sit side by side.

Is there a way to do what you suggested while keeping the text and image side by side?

Thanks for your help.

Yes, the max-width you have in CSS will keep the text to the left no matter the size of the text block. Test the text block full width.

1 hour ago, Ziggy said:

Yes, the max-width you have in CSS will keep the text to the left no matter the size of the text block. Test the text block full width.

I'm not sure what that code would be, Ziggy.

Do you have by any chance?

I think I got it.

Would you have used:

#block-83d4a78737ec1c1b2d51
{
  width: 1200px !important;
  margin: left
}

No need to change any code, leave it as it was, just edit the page and make the text block full width.

22 minutes ago, SteveBarrett said:

#block-83d4a78737ec1c1b2d51
{
  width: 1200px !important;
  margin: left
}

Definitely remove this code, it's breaking the mobile experience.

38 minutes ago, Ziggy said:

No need to change any code, leave it as it was, just edit the page and make the text block full width.

I'm sorry, Ziggy, I don't understand.

If I move the text block to full width, it will sit either above or below the image (see screenshot), whereas I would like them to sit horizontal to each other.

Apologies, I assumed that you were using Fluid Engine for that section given the overlap, how are you achieving that?

1 minute ago, Ziggy said:

Apologies, I assumed that you were using Fluid Engine for that section given the overlap, how are you achieving that?

No problem, Ziggy.

I achieved it using this code:

#block-yui_3_17_2_1_1668524304241_44202
{
  margin-left: -14rem !important;
  z-index: 99 !important;
}
#block-83d4a78737ec1c1b2d51
{
  z-index: 100 !important;
}

Oh, okay, I see what you're doing. Could you try adjusting the text block to ~2/3 of the width and the image ~1/3, and adjust the margin-left to a higher value, maybe try 20vw.

Ya, that's good idea.

I'll try that.