Jump to content

How to continue split colour background across angled section

Recommended Posts

Hi, I currently have custom code in place to create an angled section underneath the header section. The section down from this has a half split colour with one side being a navy colour and the other being white with text. Is there a way for me to continue the navy colour onto the section above so that there isn't a random white section? I've attached what i hope to achieve as well as the current situation showing the white gap. 

 

Password: Test

Thanks in advance. 

Screenshot 2023-02-08 at 11.58.55.png

Screenshot 2023-02-08 at 11.53.14.png

Link to comment
  • Replies 11
  • Views 563
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 2/20/2023 at 10:59 PM, NMcMurray said:

Hi, Oh sorry, i thought i had copied the URL in. This is it :

watermelon-mauve-m9fj.squarespace.com

Add to Design > Custom CSS

body.homepage article#sections {
    background-color: #151c26;
}

 

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

Thanks Tuan, that worked great. One last question, on some pages i need the background to be half navy and half white ( like the home page), but on others the navy needs to go all the way across (which is what the above code does). How would I apply the colour to only half the section? 

Thanks again!

Link to comment
On 3/14/2023 at 3:34 AM, NMcMurray said:

Thanks Tuan, that worked great. One last question, on some pages i need the background to be half navy and half white ( like the home page), but on others the navy needs to go all the way across (which is what the above code does). How would I apply the colour to only half the section? 

Thanks again!

Hi,

Can you share link to 2 pages? We can test code easier

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 Tuan, the page I need help with is just the home page.. i think this is the link. I need the left side of the angled section to be white (the same as what's below), and the right to be navy (the same as the below section).

https://watermelon-mauve-m9fj.squarespace.com/config/

image.thumb.png.a93febb00612b9727d50b617fd5f3b99.png

 

 

All the other pages are fine with the navy blue running all the way across the angled section. 

The only other thing I need your help with is the footer. Is there a way to make this an angled section with bottom half blue and top half navy blue (see photo below).

image.thumb.png.6bc402a93d6fd50598647e9212ca3ded.png

Many thanks for all your help.

Nicola

Link to comment
On 3/23/2023 at 4:48 AM, NMcMurray said:

Hi Tuan, the page I need help with is just the home page.. i think this is the link. I need the left side of the angled section to be white (the same as what's below), and the right to be navy (the same as the below section).

https://watermelon-mauve-m9fj.squarespace.com/config/

image.thumb.png.a93febb00612b9727d50b617fd5f3b99.png

 

 

All the other pages are fine with the navy blue running all the way across the angled section. 

The only other thing I need your help with is the footer. Is there a way to make this an angled section with bottom half blue and top half navy blue (see photo below).

image.thumb.png.6bc402a93d6fd50598647e9212ca3ded.png

Many thanks for all your help.

Nicola

What is access password?

image.png.007d27d0607fdb812ea13a02aaffe73e.png

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
  • 3 weeks later...

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.