Jump to content

CSS for overlapping text and images

Recommended Posts

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.

Screenshot 2022-11-17 at 20.27.55.png

Screenshot 2022-11-17 at 20.30.02.png

Link to comment

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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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.

Link to comment
22 minutes ago, SteveBarrett said:

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

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

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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.

Screenshot 2022-11-18 at 12.11.34.png

Link to comment
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;
}

Link to comment

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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.