Before I asked this question I did a humble Google research for several times but I really couldn't find any efficient solution for this problem. I consider a working answer to be a grace with the community:

Until now, I haven't had many panels in my sites (say no more than 1-2 mini Panels + 1 panel page, per site). I made each Panel responsive by per block elements. I must say that could take some time and it's surly not an efficient solution when you have many panels in your site...

Therefore, I am looking for a way to automize this process - Instead of making any panel layout responsive manually, I need a way (maybe even a general CSS code piece if not a module) just to ensure my panel layouts will be responsive, and an example would be:

instead of width: 50%+50% or 33%+33%+33% float\text-align: right\left, all will be centered).

So, how can you to "Auto-responsify" all existing panels, including all panels to come, in a site?

  • I don't think I even understand what you mean. How could anything automatically know what would be an appropriate way to make your site responsive? There's support for Panels in drupal.org/project/adaptivetheme but you'd need to subtheme from it for that to work.
    – Letharion
    Feb 3, 2015 at 11:11
  • There's not going to be an automatic solution: for one thing if your theme uses a grid system you'll want to integrate with that and the appropriate classes will differ depending on what system you use. Feb 3, 2015 at 11:24

3 Answers 3


I think the closest you're going to get to out of the box is Panels Extra layouts, which ships with a bunch of adaptive layouts.

Other than that, your best bet is just to create a bunch of custom layouts by yourself, with their respective templates. The documentation is not bad for that; you can find it here: Panels 3: Creating a custom layout in your theme. Alternatively, just look in the Panels codebase for their implementations.

  • Correct me If I'm wrong but if I want Flexible (Responsive) Layouts, instead of Fixed (Regular) or Adaptive (content-responding), than my only option is the second solution you gave, Or CSS per Panel that could take much time.
    – user16289
    Feb 3, 2015 at 11:33
  • That sounds as though it could be case, yes.
    – Chapabu
    Feb 3, 2015 at 12:18
  • Okay, I want to thank you very much for this help, I've learnt from that!
    – user16289
    Feb 3, 2015 at 12:22
  • It includes a set of Panoply Panels layouts which are both adaptive (adapt to panel width size) and responsive (response to screen size). This might not be needed in Drupal 8 because in D8 there is a special team that works to make the basic layouts of the module themselves responsive (though some could enjoy the extra and ready layouts of this extra module). Note: Make sure to use the Panoply set and not any other set (this is what worked for me).
    – user16289
    Jul 20, 2015 at 20:57

The Zen5 base theme ships with ZenGrids, which is a responsive mobile friendly grid system and I think it has it's own panels layouts.

Actually I've taken a look at the current release and it does have one panels layout but it's not what you're looking for. It also has some theme overrides for panes and panels pages.

It's not the role of the Panels module to have responsive layouts. The Panels builtin layouts are based on concepts of 'rows'. Your theme should pick up the HTML and turn those rows into stacks. Zen is a good place to start. And it might stack those rows out of the box. For example check out the responsive.scss file in zen/STARTERKEIT/sass/layouts.

  • Can you please elaborate more?, isn't such layout system should be a component of the Panel modules?...
    – user16289
    Feb 4, 2015 at 10:04
  • Why would it be? Panels isn't a theme, it wouldn't - not to mention couldnt - impose a grid system/other CSS philosophy on site builders. Simply wouldn't make sense to do so. Panels builds you html, and has some sensible built in layouts, but it's not supposed to replace the job of a theme builder. Unless you use a theme which already has built-in support for responsive panels, it's very likely you just need to do this yourself
    – Clive
    Feb 4, 2015 at 13:37

There is a way by using Panels bootstrap layouts module. Module adds Bootstrap layouts to Panels. It uses Bootstrap grid as a base and you can define your own settings for columns.

Your Answer

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