Trying to get the widget border to touch the footer

• 

  egm28 · Member · Oct 24, 2014 at 2:01 am

  • Copy link
  • Add topic to favorites

  Is there a way to get the border (in my case the left border) of the widget area to touch the top of the footer? I wanted to have it to where the black line on the widget area is touching the top of the footer on all the pages. I tried the following code:
  .widget {margin-left: whatever number;} but it moves the whole widget area down and not just the line.

  Thank you in advance.

  My url is http://ebonymcfarland.wordpress.com/

  My theme is sight.

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

• 

  nizamilputra · Member · Oct 24, 2014 at 2:48 am

  • Copy link

  Because of your right content is longer than left sidebar, let’s get rid border-left on sidebar then add border-right to the right content. Here the css;

  #secondary{
  border-left: none;
  }
  
  .site-content{
  padding-right: 20px;
  border-right: 1px solid #000;
  }

  Hope it will help you.

• 

  egm28 · Member · Oct 24, 2014 at 12:28 pm

  • Copy link

  Hi nizamilputra:

  The code worked on all the pages except for pages 4 and 8 in my portfolio section. Is there a way to fix that?

• 

  nizamilputra · Member · Oct 24, 2014 at 12:59 pm

  • Copy link

  Sure, let’s try with this;

  .page-id-592 .site-content{
  min-height: 735px;
  }

• 

  iamjankoch · Member · Oct 24, 2014 at 1:01 pm

  • Copy link

  In fact, on my Linux browser (Firefox) only the first page is working. On all other pages there’s a white space between the border of the content area and the bottom. That is, because your sidebar is longer than your content on those pages.

  You could add empty paragraphs to those pages to make the content longer.

  Or you could add specific CSS that loads for portfolio pages 2,3,5,6,7 and 4,8 – but that’s rather complex. You’d need to change your theme’s functions.php file to check the URL of a page and load the CSS code depending on that URL.

  I can provide the code, but if you’re not experienced with PHP it might break your theme.

  Best,
  Jan

• 

  egm28 · Member · Oct 24, 2014 at 1:19 pm

  • Copy link

  The code worked on page 4 but not page 8. I tried the following code:

  .page-paged-8 .site-content {
  min-height:735px;
  }

  but that didn’t work.

• 

  egm28 · Member · Oct 24, 2014 at 1:21 pm

  • Copy link

  Hi iamjankoch:

  Yeah I’m not experienced in PHP but thanks for offering.

• 

  nizamilputra · Member · Oct 24, 2014 at 1:33 pm

  • Copy link

  I see it works in my chrome http://awesomescreenshot.com/0d93pz9xa7. What browser do you use?

• 

  egm28 · Member · Oct 24, 2014 at 1:37 pm

  • Copy link

  Internet Explorer. I forgot the version. I assume it’s the latest version because I have Windows 8.1.

• 

  egm28 · Member · Oct 24, 2014 at 1:37 pm

  • Copy link

  If it can’t be fixed, that’s fine. Thank you very much for your help nizamilputra.

• 

  nizamilputra · Member · Oct 24, 2014 at 1:41 pm

  • Copy link

  Try with higher value, maybe 800px.

  Ok, no problem egm28.

• 

  egm28 · Member · Oct 24, 2014 at 1:46 pm

  • Copy link

  I put the value to 800px and it worked. Thank you very much.

• 

  nizamilputra · Member · Oct 24, 2014 at 1:54 pm

  • Copy link

  Glad to hear that!