Bedford: How to increase the blog sidebar

Squarespace Q & A | How to increase the blog sidebar in Bedford | Kerstin Martin Squarespace Studio

This question came up during one of my Instagram Squarespace Q&A sessions, thank you Allie Banks for asking it! 

When I am looking for a CSS solution I often start with good old Google and the Squarespace Answers website. I immediately found a few posts on the same topic and this is the one I used as the basis for my own custom CSS. The code didn't quite work in my Bedford template and I had to fix some of the padding and margins to make it look better. I also added code for mobile views to make sure this also looked good on tablets and phones. 

As a general rule I don't recommend to make changes to the structure of a template and to resize fixed containers using CSS but if you are set on doing this then this method may work well. As always I recommend thorough testing across browsers and different screen sizes.


Here is the code, feel free to play around with the padding and margin value to adjust to your own preferences if needed.

NOTE: I added the border code at the top of each element because I often use borders to outline the element I am targeting so that I can see its exact placement on a page and identify, for instance, padding and margins. To "turn on" the borders simply replace 0px with 1px. And once you are finished and happy with your code feel free to remove the whole border line for each element. 

// Increase Blog Sidebar in Bedford

#page {
   border: 0px solid #000;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   width: auto;
   margin: auto;
   max-width: 1200px;
   padding: 70px 0 0 0;
}

article {
   border: 0px solid red;
   padding-left: 20px;
   display: block;
   max-width: 75%;
}

#rightSidebar {
   border: 0px solid blue;
   padding-left: 0px;
   padding-right: 0px;
   margin-left: -10%;
   width: 25%;
   font-size: 16px;
}

// Tablet View
@media only screen and (max-width: 780px) {
   #page {
      border: 0px solid #000;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: auto;
      margin: auto;
      max-width: 1200px;
      padding: 70px 0 0 0;
   }

   article {
      border: 0px solid red;
      padding-left: 20px;
      display: block;
      max-width: 90%;
   }

   #rightSidebar {
      border: 0px solid blue;
      padding-left: 0px;
      padding-right: 0px;
      margin-left: 20px;
      width: 28%;
      font-size: 16px;
   }
}

// Phone View
@media only screen and (max-width: 640px) {
   #page {
      border: 0px solid #000;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: auto;
      margin: auto;
      max-width: 1200px;
      padding: 70px 0 0 0;
}
   article {
      border: 0px solid red;
      padding-left: 20px;
      display: block;
      max-width: 90%;
   }

   #rightSidebar {
      border: 0px solid blue;
      padding-left: 0px;
      padding-right: 10px;
      margin-left: 23px;
      width: 90% !important;
      font-size: 16px;
      }
}


Recent posts

STUDIO NOTES

Subscribe to my newsletter and receive instant access to my FREE Squarespace SEO mini course as well as discounts to my other courses. Plus Squarespace news and tips, blog post summaries and the occasional personal musings with pretty pictures!