How can I make blocks shrink while staying on the same line as the window gets smaller? As of right now my blocks are going under other blocks as my window gets smaller. How can I make my theme responsive, but have the blocks stay on the same line? I am using Drupal 7.

  • Each block has a weight property which dictates how they are rendered within the region in comparison to other blocks. You can alter this weight on page render, but not on window resize. You might have to use combination of CSS @media query and javascript to set where you want your block rendered when the window is resized. – rwaery Jul 29 '14 at 20:45

If you don't want to go into code, you could take a look at the panels module https://www.drupal.org/project/panels . You can create a panel page where the regions have their widths in percentages. And then you can place blocks in these regions.


To make your site or block responsive you can either create your own custom theme and in its css file you can follow these media queries as per your requirement or also you can try using Zen or else Bootsrap theme which gives by default resposive look to the site.


Use CSS to set their width to a percentage rather than a pixel number. But before that you have to set your most outer div's width to the layout's max-width so that it will fit in since the calculation of pixel to percentage is totally dependent on the width defined to any of the parent element.

Assuming you have a container div is 800px wide if you have a col div in the container as 384px wide then that would be 48%

384*100/800 = 48%
  • I know of a module that will let me make my own class for each block, but how would I make an out div without panels? – Will Aug 11 '14 at 21:28
  • I found that panels and display suite are good choices. – Will Aug 11 '14 at 23:01

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.