IMy footer is not full width

• 

  lukegaragozlo · Member · Jan 6, 2022 at 1:43 am

  • Copy link
  • Add topic to favorites

  I am using the Stratford theme and I want make my footer background blue, then have it extend to the full width of the screen. When I use a cover as a block on the page and set it to full width, it works fine, but the footer itself cannot be made full width. Can you help me with some code that could change this? When I change the background colour, the footer extends to width = 100%, but not actually across the entire page. Thank you :)

  The blog I need help with is: (visible only to logged in users)

• 

  staff-mckluskey · Staff · Jan 6, 2022 at 10:03 am

  • Copy link

  Hi there!

  Here’s the code you’ll need to add to set the footer to full-width, and change its color:

  /* Set footer to full-width and change footer color */
  
  body:not(.fse-enabled) #colophon {
      max-width: calc(100% - 8px);
      width: 100%;
  }
   
  @media only screen and (min-width: 560px) {
      body:not(.fse-enabled) #colophon {
          max-width: calc(100% - 64px);
      }
  }
  
  body:not(.fse-enabled) #colophon {
    background: aliceblue;
    width: 100%;
    max-width: none;
    padding: 1.5em;
      display: block;
    justify-content: center;
  }
  
  .site-info {
      text-align: center;
  }

  I used the color aliceblue just for testing. You can replace that word with any hex color code: https://www.color-hex.com/.

  Also, remember that with your plan, you can access Live Chat directly via https://wordpress.com/help/contact. That way, you can get help faster.

• 

  lukegaragozlo · Member · Jan 7, 2022 at 12:52 am

  • Copy link

  Thank you so much, worked wonderfully!

• 

  jamietaylor4 · Member · Jan 19, 2022 at 11:53 am

  • Copy link

  Hi, just found this thread and I’ve just tried to add this to my site using code snippets plugin but I’m getting the error message:

  The code snippet you are trying to save produced a fatal error on line 3:

  syntax error, unexpected ‘.’

• 

  staff-mckluskey · Staff · Jan 19, 2022 at 1:17 pm

  • Copy link

  @jamietaylor4 what site are you working on?

• 

  arbolcommunity · Member · Feb 19, 2022 at 5:52 pm

  • Copy link

  Thank you so much, Fresatomica!

• 

  arbolcommunity · Member · Feb 19, 2022 at 6:20 pm

  • Copy link

  Is it also possible to make the copy and content within the footer extend the full width?

• 

  staff-mckluskey · Staff · Feb 20, 2022 at 9:11 am

  • Copy link

  Hi @arbolcommunity, please reach out directly via live chat about this: https://wordpress.com/help/contact. Our support team will take a look at your site and advise. Thanks!