I want to make a layout INSIDE the main content which is responsive. I've read through dozens of pages, watched several videos and still there is no clear path to acomplish resposive content. I started out with the latest Zen, but Display Suite and Panels let me place my fields in different grid layouts, but these grids end up not being responsive.

I now installed Omega, ending up having the same issue. So, which theme and which modules let me setup a responsive grid WITHIN the main content?

  • are you tried Zen-grids, with compass, and sass? Commented Sep 20, 2012 at 15:13
  • I was hoping to get around Zen-Grids. I have no experience with compass and sass. Is it really the only option to learn all this just to be able to swith a side-by-side design into stacked within the content?
    – Deton8
    Commented Sep 20, 2012 at 15:22
  • Compass and SASS are awesome. In the end I think you will be happy you used them.
    – iconoclast
    Commented Sep 20, 2012 at 15:28
  • No, you don't need to learn SASS/COMPASS (but you might-should want to!) You can easily use Zen 5 Responsive Theme by editing the CSS files directly, not the SCSS files. Panels is not responsive unless you use Panels Extra Layouts. Commented Feb 8, 2013 at 18:35
  • Panels is not responsive. You will need to create your own layouts or use panelizer. Omega is responsive and you should not run into problems with it.
    – Mike
    Commented Apr 25, 2013 at 22:15

3 Answers 3


If you are using Zen theme, best way(i hope so) to do responsive design is - Zen grids, First u need to install ruby gems, after you installed u need two more things, as root install sass and compass and ofc. zen-grids

gem install sass 
gem install compass
gem install zen-grids

Then go to your theme folder, and write compass watch now all your css yo need to write in sass folder it will produce css in same files in your css folder. To do blocks responsive, in Layouts folder(ofc if you are using Zen sub theme) u will see responsive-sidebars.scss or similar, now u need to import @import "zen";// Import Zen Grids with this statement. and write zen-grids code in your responsive-sidebars.scss. Read more about Zen grids - here. I hope it helps.

  • neok: thank you. I will consider working myself into this. Still i was hoping to get a Module based solution...
    – Deton8
    Commented Sep 20, 2012 at 15:41
  • its really awesome solution tbh), this is not really hard, try it. and good luck finding that module, but i think there is no 100% solution for this, u will probably will need to write some css, without zen-grids and sass, damn hard work :D Commented Sep 20, 2012 at 15:45
  • alright, thanks for your input guys. I'll start right now...
    – Deton8
    Commented Sep 20, 2012 at 17:22
  • if you do so, don't forget to install Bundler : it manages your appli's dependencies through its entire life, across many machines, systematically and repeatably. In command line "cd <path to your sub-theme's directory>" then "bundle install". Once done, check in your subtheme directory, bundler should have written a new file : gemfile.lock. This is your insurance ;)
    – Kojo
    Commented Nov 5, 2013 at 21:59

I don't think you need get into zen grids just for responsive layout. Use Zen 5 responsive layout, and then put your content in the main content area as usual, and you have a responsive and adaptive website. Well, read up on responsive images.

I haven't tried this with Display Suite, but I assume it lets you set responsive columns. I use Panelizer with Extra Layouts, which are responsive.


If you're looking for the best way to use both Panels with a responsive design, you might be really interested in Adaptivetheme : it has a great Panels support, it is used by almost 50.000 sites (!), has subthemes and an extensive documentation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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