Jump to content

Section: Half Image/Half Text - Full Bleed

Recommended Posts

Hi There, 

 

Im trying to create a section such as the below screenshot for my services page. Please help. I dont know how to make it full bleed or split my section into two columns. 

 

1990741797_Screenshot2021-11-01at08_36_55.thumb.png.1dcddac0f9a94c6bc40a328ac95ad8cb.png

Link to comment
  • Replies 8
  • Views 2.5k
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, tuanphan said:

Hi,

Can you share link to service page? SS 7.0 - 7.1 will need a different solution

This is unfortunately an image from my XD file - so ive had to resort to laying it out as text only on my site 

 

https://cheetah-daisy-5ewp.squarespace.com/config/

password: inprogress 

 

ignore the domain lol I still need to configure it

 

this website I an example: https://lindsaymariko.com/services

Edited by cbcdesign
Link to comment
On 11/1/2021 at 6:47 PM, cbcdesign said:

This is unfortunately an image from my XD file - so ive had to resort to laying it out as text only on my site 

 

https://cheetah-daisy-5ewp.squarespace.com/config/

password: inprogress 

 

ignore the domain lol I still need to configure it

 

this website I an example: https://lindsaymariko.com/services

YOu are using SS 7.1. You can add a new section

next, add a section background image

next, add 2 columns with Splacer on Left - Text Block on right

Then let me know. We will give the code to make image half width & make it float to left. To achieve demo site layout

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 1/14/2022 at 10:36 PM, HOOH said:

Hi. 
I would be really happy to know how to achieve this too ! 
We encounter the same problem on this website with split side-by-side when on tablet view : www.sincro.fr 

 

Can you describe problem on tablet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi @tuanphan

Thanks for asking. 

For some sections of the site, I have a split screen with an image on left and on right. We created a background with an image including two parts (works on desktop, almost on mobile, but on tablet).

On tablet, both sides of the background appear and the left one is cropped because of the format.

The best would be 2 columns with 2 images both covering the section from top to bottom. Responsive would be good (also on mobile). But I have been unable to find the way do it...

 

 

Capture d’écran 2022-01-17 à 09.00.57.png

Capture d’écran 2022-01-17 à 09.01.42.png

Link to comment
On 1/17/2022 at 3:08 PM, HOOH said:

Hi @tuanphan

Thanks for asking. 

For some sections of the site, I have a split screen with an image on left and on right. We created a background with an image including two parts (works on desktop, almost on mobile, but on tablet).

On tablet, both sides of the background appear and the left one is cropped because of the format.

The best would be 2 columns with 2 images both covering the section from top to bottom. Responsive would be good (also on mobile). But I have been unable to find the way do it...

 

 

Capture d’écran 2022-01-17 à 09.00.57.png

Capture d’écran 2022-01-17 à 09.01.42.png

You can use this plugin to create Split Section. I used it on some sites & worked great.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.