Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
obrienleeanne

Creating side by side full bleed images

Question

Hi there,

I am wanting to have full bleed image and background color side by side with text on the color background side, much like the Squarespace website: https://www.squarespace.com/

and see see screenshot for area I am referring too.

I am wanting the 2 sides to be separately responsive so that the type is always just on the colour background.

I do not have the coding knowledge to do this. Is there anyone who can help?

Thank you.

Screen Shot 2019-12-11 at 10.00.45 am.png

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 0

Hi again,

Is there a way to get the left and right column to stack? If the image is half transparent that means on mobile type runs over half of image...

Thanks for any suggestions

Share this post


Link to post
  • 0
27 minutes ago, obrienleeanne said:

Hi again,

Is there a way to get the left and right column to stack? If the image is half transparent that means on mobile type runs over half of image...

Thanks for any suggestions

Can you share link to your site with transparent background?

I guess we can use background position attribute to adjust.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

Yes, here is the site:

https://clarinet-strawberry-9nzf.squarespace.com/

PW: gracie

You can see I have tried various methods, one being having the banner image half the intended background color (our nannies). The transparent background one shows as black (our goal) as you said in your earlier post. I just need to know if it's possible to stack that left and right sides on mobile.

No stress if not possible! Thank you.

Screen Shot 2019-12-11 at 3.16.24 pm.png

Screen Shot 2019-12-11 at 3.16.14 pm.png

Share this post


Link to post
  • 0
35 minutes ago, obrienleeanne said:

You mean have the text as part of the image block, using maybe card as the design option? I'll try that. ; )

https://forum.squarespace.com/topic/153434-add-button-to-gallery-image/#comment-339735


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

I used the overlap and it's working well, thank you! Just one last question: Do you know what I can do to get the image to bleed to the bottom of the block (and possibly to the side but that's not an issue really), between the pages, see screenshot.

Screen Shot 2019-12-11 at 4.33.32 pm.png

Share this post


Link to post
  • 0
16 minutes ago, obrienleeanne said:

I used the overlap and it's working well, thank you! Just one last question: Do you know what I can do to get the image to bleed to the bottom of the block (and possibly to the side but that's not an issue really), between the pages, see screenshot.

 

add to Home > Design > Custom CSS

#goal .sqs-block-image {
    padding-bottom: 0 !important;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...