I have a Zen 7.x.5.x Responsive subtheme with Right sidebar...

I know, I am new with all this responsiveness staff; but - I think the right sidebar doesn't shrink when I resize my browser....it just moves inside, staying about the same size....or may be I don't understand something....

so, I have made up my content area - it consists now from 2 blocks floating left and right; I put them width proportionally to content area : 67% and 33% - they resize, when I resize browser....but sidebar looks too big and not shrinking; even it seems to be set in percents from page's 1200px.....


Inspect the right sidebar element in your browser. Then select

<section class="region region-sidebar-second column sidebar">

in the DOM and it should give you the width as a percentage. This is proof that the sidebar is responsive. Now drag the browser window smaller and observe the media query changing at breakpoints and the percentage should also change. At mobile breakpoint the sidebars should be 100%.

Now look in your sub theme's sass/layouts folder for the file _responsive.scss

You will see snippets like this

$zen-column-count: 3;

#content {
          @include zen-grid-item(2, 1);

        /* Span 1 column, starting in 3rd column from left. */
        .region-sidebar-second {
          @include zen-grid-item(1, 3);

This is where the sidebar width is set in relation to the content area. In the above case it is 1 column wide starting at column 3. As there are a total of 3 columns it is 1/3 the total width.

You can change it here if you have compass set up and working and properly watching the folder for changes.

  • OK, but 33% from 1200 would be what?! - near 400px? I need to plan there a banner of 320px in future, but now I have put there image thumbnail of 220px and it looks like full sidebar? Aug 18 '14 at 5:08
  • ...and what is this line in responsive.css about: /* Span 1 column, starting in 5th column from left. */ .sidebar-second .region-sidebar-second { float: left; width: 20%; margin-left: 80%; margin-right: -100%; } - so is it only 20% and not 33%? Aug 18 '14 at 5:26
  • Look in _responsive.scss at the breakpoints also. If you have sass and compass installed then you can alter it using the zen grids mixin. But you don't have to. If you want you can scrap the whole file and create your own using only css. But then you would miss out on a whole lot of functionality. Look at The Complete Guide To Omega 4 series. It explains how to install sass and compass. It is quite a process but once it is done it will take your theming to a whole new level. Aug 19 '14 at 4:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.