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.
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.
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
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%