Vary sidebar width

sage
1

Hi
I would like to have the sidebar different widths on different screen sizes.
What would be the best way to do this?
thanks

2

I think this is too generic question, and generic CSS related. There is a lot of ways. Maybe you can try with bootstrap grid classes or jquery media queries.

getbootstrap.com/css/#grid

2 Likes
4

Yes it can be done many ways with CSS, but I wanted to know if anyone had done it simply using the calculations in _grid.scss

I have now done it, was hoping I could just set the $sidebar-md-columns in a media query but that doesn’t work, I had to put the whole calculation section in a media query.

5

I ended up doing the same thing @safetycat - not sure if this is the best way to do it but my _grid.scss looks something like this:

[code]
// Grid system
.main {
@include make-sm-column($main-sm-columns);
.sidebar-primary & {
@include make-sm-column($main-sm-columns);
}
@media (min-width: $screen-md-min) {
@include make-md-column($main-md-columns);
.sidebar-primary & {
@include make-md-column($main-md-columns - $sidebar-md-columns);
}
}
@media (min-width: $screen-lg-min) {
@include make-lg-column($main-lg-columns);
.sidebar-primary & {
@include make-lg-column($main-lg-columns - $sidebar-lg-columns);
}
}
}

.sidebar {
@include make-sm-column($sidebar-sm-columns);
@media (min-width: $screen-md-min) {
@include make-md-column($sidebar-md-columns);
}
@media (min-width: $screen-lg-min) {
@include make-sm-column($sidebar-lg-columns);
}
}[/code]

Also had to modify _variables.scss accordingly:

// Grid settings
$main-sm-columns:       12;
$sidebar-sm-columns:    12;
$main-md-columns:       12;
$sidebar-md-columns:    4;
$main-lg-columns:       12;
$sidebar-lg-columns:    3;

If anyone knows how to offset the sidebar (e.g. add the equivalent of .col-lg-offset-1 to the sidebar) using this method I’d love to hear it.

2 Likes
6

Hi, to get the offset you need to apply the make-sm-column-offset() Bootstrap mixin for .sidebar:

.main {

  @include make-sm-column($main-sm-columns);

  .sidebar-primary & {

    // `.main` is narrower by 2 columns, to give room for the offset
    @include make-sm-column($main-sm-columns - $sidebar-sm-columns - 2 );

  }

}

.sidebar {

  // Set the width, then the offset, using Bootstrap mixins
  @include make-sm-column($sidebar-sm-columns);
  @include make-sm-column-offset(2);

}

This article mentioned the offset mixin - it is also a useful tutorial on semantic classes.

Hope this helps - I certainly found it pretty useful. I’d be interested to know how it works within your media queries…