How to set front page widgets and sidebar right against the page edges

Hi there,

I want to run a sidebar, and make that sidebar sticky. I have got this sorted.

The issue is getting the widgets to fill the page as much as possible.

I want to remove the border and shift the widget and sidebar right against the left and right sides of the page.
Pease ass the attached image by way of description:

Regards,

Hello there,

Thank you for asking.

In order to achieve that objective, could you please try to add the following CSS code through the Simple Custom CSS plugin?

@media only screen and (min-width: 992px){
  .home #content.container{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }  
  
  #primary.content-area{
    width: -webkit-calc(70% - 30px);
    width: -moz-calc(70% - 30px);
    width: calc(70% - 30px);
  }
  
  #secondary.widget-area{
    width: 30%;
  }
}

Let us know how it works for you.

Regards,
Kharis

Morning Kharis,

Thank you for your reply!

This works great thank you.

Just 2 last questions:

  1. I would like to remove the double border around the content and sidebar widget

  2. On load, there is a white space on the far right, on the right of the sidebar widget. The sidebar widget is set to be sticky.
    When I scroll down, the widget (once it leaves it’s border, bumps to the right, sitting right against the right side of the screen. This is actually who I would like it to be on load. Should this resolve, when I remove the double line borders?

Please see both attached images by way of explanation…

Hello there,

> 1 & 2

Try to replace the previous code to the following:

@media only screen and (min-width: 992px){
  .home #content.container{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }  
  
  #primary.content-area{
    width: -webkit-calc(70% - 30px);
    width: -moz-calc(70% - 30px);
    width: calc(70% - 30px);
     border: none;
  }
  
  #secondary.widget-area{
    width: 30%;
  }
  
  /* Remove border */
  .widget-area,
  .page .hentry{
    border: none;
  }
  
  /* Sticky sidebar */
  .home #secondary.widget-area{
    position: fixed;
    top: 0;
    right: 0;    
  }  
  
}

You should make your own CSS adjustment as needed.

Regards,
Kharis