How to customize a footer on one page

• 

  egm28 · Member · May 5, 2014 at 12:41 am

  • Copy link
  • Add topic to favorites

  Hi:

  I noticed that the footer on page 1 in my portfolio section is different from all the other pages. I checked the Theme’s CSS and the width is 100% just like the rest of the footers on the other pages. But, for some reason, it doesn’t look the same as the other footers. How do you make the page 1 footer look the same as the other footers? Thank you.

  Theme: Triton Lite My link: http://ebonymcfarland.wordpress.com/

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

• 

  thesacredpath · Member · May 5, 2014 at 5:36 am

  • Copy link

  Hi, the footer looks the same for me on Home, Resume and Contact. It floats above the bottom edge of my browser window since the content is short. On the Portfolio page, the footer is flush to the bottom of my browser window when I scroll to the end of that page since the content of that page is taller than my browser window/monitor.

  Is that what you are talking about? If not, can you point to the pages where it looks different?

• 

  hafizr · Member · May 5, 2014 at 5:39 am

  • Copy link

  @thesacredpath on the homepage, the footer’s width is 100% of browser width, while on this page: http://ebonymcfarland.wordpress.com/portfolio-2/ the footer width is only as wide as the content area (I’m on Chrome).

  I’ve been looking at this for a while but couldn’t find the fix yet.

• 

  egm28 · Member · May 5, 2014 at 12:46 pm

  • Copy link

  Hi @thesacredpath,

  What @hafizr said is correct.

• 

  thesacredpath · Member · May 5, 2014 at 11:50 pm

  • Copy link

  Ah, strangeness. On portfolio 2, the footer div is a child of the container, but on the main page, it is at the same level as the container (not a child). That is why they look different. Add the following CSS to correct that.

  .home .site-footer {
      float: none;
      margin-left: auto;
      margin-right: auto;
      width: 960px;
      height: 55px;
  }

• 

  egm28 · Member · May 6, 2014 at 12:32 am

  • Copy link

  Hi thesacredpath:

  It didn’t work. It just made the footer on the home page the same width as the page 1 portfolio footer. I wanted all of the footers to cover the whole bottom of all the pages and page 1 in the portfolio section isn’t doing that.

• 

  egm28 · Member · May 7, 2014 at 12:19 am

  • Copy link

  I have been working on this most of the day. Just putting in random codes and I think this might be the start of the code:

  .page-id-592 .site-footer {
  }.

  I’m thinking this is the code because when I put in random styles, the look of the footer changed.

  Remember, I’m trying to fix page 1 in the portfolio section.

  I noticed something else. When I checked the theme’s CSS container code, I also noticed that the bottom of the container is underneath the footer. The bottom of the container isn’t underneath the footers on the other pages, just on page 1. This looks like the problem. Is there a way to fix this?

• 

  thesacredpath · Member · May 8, 2014 at 3:46 am

  • Copy link

  This is a strange one. Add the following CSS at the very end of your existing CSS and see what you think.

  body.page-id-592 {
      position: relative;
  }
  .page-id-592 .site-footer {
      position: absolute;
      bottom: 0;
      left: 0;
  }
  .page-id-592 #posts {
      padding-bottom: 50px;
  }

• 

  egm28 · Member · May 8, 2014 at 10:42 am

  • Copy link

  It worked!!!!!!!!
  Thank you very much @ thesacredpath for helping me.

• 

  thesacredpath · Member · May 8, 2014 at 3:11 pm

  • Copy link

  You are welcome.