Page sections/color to fill page

I'm trying to design a landing/home page which has a plain colored background, an image, and a phone number with no Footer. I can add sections of color and insert a photo, but there's always a white area at the bottom of the page. 

What I would really like is one section to fill the page and insert the photo and number. How many blank sections should it take to fill a page?

This seems like such a simple thing to do. I tried using css on the page to just change to background, but that doesn't seem to work.

body {
  background-color: #E8E67D !important;
}

Am I missing something simple here?

16 hours ago, CooperBlack said:

I'm trying to design a landing/home page which has a plain colored background, an image, and a phone number with no Footer. I can add sections of color and insert a photo, but there's always a white area at the bottom of the page. 

What I would really like is one section to fill the page and insert the photo and number. How many blank sections should it take to fill a page?

This seems like such a simple thing to do. I tried using css on the page to just change to background, but that doesn't seem to work.

body {
  background-color: #E8E67D !important;
}

Am I missing something simple here?

Hi, please share the link and password if applicable 🙂

https://raccoon-oarfish-szer.squarespace.com

Pwd: coding-is-no-fun!

On the Process and Contact pages the section grey color doesn't go to the bottom of the page. I tried using:

body {
background-color: #8D8D89 !important;}

On the page CSS areas, but nothing happens.

And also, how can I remove the white area below the Footer on certain pages (all but the Projects page for some reason).

Thanks.

It dawned on me the the code for changing the page color might have to be in the main CSS area, not the individual page area.

Which is the case.

So there's no way to change individual page colors? I ask this because I find Sections never go all the way to the bottom of pages (Why?) and if I make all page colors the same, then there would be a band of color difference the bottom where a Section and the page color met.

On 3/10/2022 at 12:18 AM, CooperBlack said:

https://raccoon-oarfish-szer.squarespace.com

Pwd: coding-is-no-fun!

On the Process and Contact pages the section grey color doesn't go to the bottom of the page. I tried using:

body {
background-color: #8D8D89 !important;}

On the page CSS areas, but nothing happens.

And also, how can I remove the white area below the Footer on certain pages (all but the Projects page for some reason).

Thanks.

 

 

Hi,

Password is incorrect

coding-is-no-fun!

I changed my design after posting this question. The only thing I discovered about overall page coloring was to add code to the main site are, not individual pages. Which works in a way, but adds the color to the whole site. I would still like to know if there's a way to add background color to individual pages.

Pwd. Largeosity

*As it turns out I do have an issue. On the Contacts page, why does the bottom grey section not hit the Footer? One solution would be to make that page color match the section. WHich I guess gets back to the question of how.*

https://raccoon-oarfish-szer.squarespace.com

Pwd. Largeosity

Figured it out.

#collection-(number for page) {
  background-color: #8D8D89 !important;
}

On a couple of pages with galleries, the content doesn't reach the bottom of the page. Resulting in a white area between that and the footer.

https://raccoon-oarfish-szer.squarespace.com/projects/spiders?p

Pw: Largeosity

I tried making the whole site background the same color as the gallery background, but that doesn't seem to alleviate the white.

body {
  background-color: #DFE0E1 !important;
}

What am I missing?

11 hours ago, CooperBlack said:

On a couple of pages with galleries, the content doesn't reach the bottom of the page. Resulting in a white area between that and the footer.

https://raccoon-oarfish-szer.squarespace.com/projects/spiders?p

Pw: Largeosity

I tried making the whole site background the same color as the gallery background, but that doesn't seem to alleviate the white.

body {
  background-color: #DFE0E1 !important;
}

What am I missing?

Hi,

It looks fine to me. Which screen size do you see problem?

I'm having trouble with this too. Surprisingly there's no built-in option to change the background color on a page-by-page basis, only the whole site. I just want to make certain pages have a solid black (#000000) background behind all the sections, top to bottom (including header and footer). Ideally this is something I could add to the header injection of specific pages, as my site-wide Custom CSS is getting crowded! 

But if that is the case, I know how to grab my site collection/sections codes, I just need the code to plug those into.

Thanks in advance for any help. 

On 11/16/2022 at 3:35 PM, AndyKhouri said:

I'm having trouble with this too. Surprisingly there's no built-in option to change the background color on a page-by-page basis, only the whole site. I just want to make certain pages have a solid black (#000000) background behind all the sections, top to bottom (including header and footer). Ideally this is something I could add to the header injection of specific pages, as my site-wide Custom CSS is getting crowded! 

But if that is the case, I know how to grab my site collection/sections codes, I just need the code to plug those into.

Thanks in advance for any help. 

If you use a Business Plan or higher, no need to find collection/section id, just add this code to Page Header

<style>
  .section-background, .page-section, .section-border, body {
  	background-color: black !important;
  }
</style>

On 11/19/2022 at 6:36 PM, tuanphan said:

If you use a Business Plan or higher, no need to find collection/section id, just add this code to Page Header

<style>
  .section-background, .page-section, .section-border, body {
  	background-color: black !important;
  }
</style>

 

Hey this is great! A followup: is there a way to adjust this code for gradients? I tried it but it adds the gradient for each section rather than placing one gradient behind all sections. Here's an example in the screenshot; there's just one section on this page, the rest is blank.

On 11/21/2022 at 11:05 PM, AndyKhouri said:

Hey this is great! A followup: is there a way to adjust this code for gradients? I tried it but it adds the gradient for each section rather than placing one gradient behind all sections. Here's an example in the screenshot; there's just one section on this page, the rest is blank.

I think I figured this out. If you put this code into the header code injection, you use a single gradient underneath all sections. And when you copy the code and adjust it for a different page, it affects only that page. Just replace my gradient particulars with your own.

<style>
 .site-wrapper {
      background: linear-gradient(100deg, #000000, #ffffff)!important;
  }
</style>