Jump to content

Help! how to create a splitscreen section

Recommended Posts

Site URL: http://www.goodstuff.ventures/

I created a split screen section for a website, but the code does not work very well. I have issues with the height - sometimes  the content overflows and is then hidden.

Is there a way to create this, as a code block for example? 
It is not the usual splitscreen, with one image and texts. 
I need a different background color for each part, and they have to be outlined in yellow (designer's wish).
you can see what I did in the link provided, and
here is an image:


Any idea how to do this ?
Is there a simple way using a code block, hardcoded ?

Link to comment
  • Replies 6
  • Views 1k
  • Created
  • Last Reply

@GSv great! I know you're trying to use a code block to achieve this, and have mentioned that you didn't want to use image blocks. But you can definitely use image blocks (portrait layout) but then you hide the images and add a background to each of these images separately and it is quite easy. You can also add a color hover effect if you want the color to change when hovering over the content. 

If you can, share how you fixed it 😉  and good luck! The site is looking great!

Link to comment

Thanks for the suggestion - I wasnt aware using image blocks you can add text over it, using the full width and achieve this. 
I will check that out!

Edit: the responsiveness has still to be fixed - once I got this, I will share the code!

Link to comment


This topic is now archived and is closed to further replies.

  • 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.