Adjust the width of sidebar and content

This code will do the trick:

@media all and (min-width: 50em) {
  .sidebar {
    width: 30.33%;
  }
  .main {
    width: 33.33%;
  }
  .content-container:before {
    left: 33.33%
  }
  .content-container:after {
    right: 33.33%
  }
}

Both sidebars have a margin of 3% on the outside which is why the total only adds up to 93.99%. This margin helps them line up with the header and footer. The second part is to move the vertical borders that show between the sidebars and main content.

Hi Ben,

I made the adjustment and when I change it to “Right sidebar – wide” to both Blog and Post, here’s what is looks like.

Blog – https://www.angelespost.com/wp-content/uploads/2018/02/front-page.jpg
Post – https://www.angelespost.com/wp-content/uploads/2018/02/post-view.jpg

How can I adjust the width of the main content, so that it will be like..

Sidebar (right and left) 1/3
Main content – 2/3

I hope I made sense on the second part of my post. ??

Btw… is this possible with the pro version?

Thanks!

Try this updated CSS for the right sidebar – wide layout:

@media all and (min-width: 50em) {
  .sidebar {
    width: 30.33%;
  }
  .main {
    width: 33.33%;
  }
  .content-container:before {
    left: 33.33%
  }
  .content-container:after {
    right: 33.33%
  }
  .layout-right-sidebar-wide .main {
    margin: 0;
    margin-left: 3%;
    padding: 0;
    width: 40%;
  }
  .layout-right-sidebar-wide .loop-container {
    margin-left: 0;
  }
}

That’s an interesting idea for a feature. Could be cool to include an option for everyone to decide the exact percentage widths of the sidebars VS the main content.

Works perfectly… and I can event switch the Blog layout without any problem but I think I will use the Right sidebar – wide for now.

If you can place an option that users can choose the position of the sidebar/s and main content and the size then that will be great!

Also… I can’t seem to find where or how to make the new Footer widget area work.

Cheers!

Great, glad you like it!

You don’t see the Footer widget area available with the other widget areas? It should be here: https://pics.competethemes.com/psSn

Hi,

Yes, I added a widget on that footer but it does not appears when I view the site. Right, there’s supposed to be am Archives widget there but nothing appears.

Also, when I place an adsense code widget as the first widget, it does not appear but when there is something coming before the adsense code widget it will appear, this happens on both the left and right sidebar.

Thanks,

I can’t recreate the issue with the footer widgets not displaying, so I think this may be a caching issue. Do you have a caching plugin on your site and if so can you try emptying the cache and then check if the footer widget appears?

Could you link me to the adsense widget you are using?

Looks like I fixed the problem with the footer. I’m using a child theme and when I switch to the main/parent theme and viola… the footer widget appeared.

Looks like same thing with the sidebar adsense.. I’ll try to play around with the codes of the child themes and see if I can fix it my self… if not then I’ll contact you again. ??

Cheers!

Okay cool. I would recommend copying the new footer.php file from Mission News into your child theme and then making your existing updates to it. The main difference is that there is a new call to output the footer widget area on line 17:

<?php get_sidebar( 'site-footer' ); ?>