Zen theme. Responsive blocks.

By WillyN on 17 Jan 2016 at 10:49 UTC

Hello.
In Zen theme I need four regions in the footer area to insert views blocks.
Therefore I have defined them in .info file:
region [footer_sub1] = Footer sub1
region [footer_sub2] = Footer sub2
region [footer_sub3] = Footer sub3
region [footer_sub4] = Footer sub4
So in page.tpl.php have i inserted:

<? php print render ($ page ['footer_sub1']); ?>

<? php print render ($ page ['footer_sub2']); ?>

<? php print render ($ page ['footer_sub3']); ?>

<? php print render ($ page ['footer_sub4']); ?>

In responsive.css it is styled:
# footer_sub1, # footer_sub2, # footer_sub3, # footer_sub4 {
float: left;
width: 25%;
}
But this is not working.
The layout is not responsive and regions / blocks will not move below each other when the browser is minimized. But remains at the same "line," and overlap.

What am I doing wrong? How to solve this problem as blocks follows the responsive layout?

Comments

OK. I think I have it.

WillyN commented 17 January 2016 at 15:27

OK. I think I have it.
It is not the blocks which are not responsive. But the content.
The above is, however, not correct. In page.tpl.php I have the following (probably taken from Bartik theme):

<? php if ($ page ['footer_sub1'] || $ page ['footer_sub2'] || $ page ['footer_sub3'] || $ page ['footer_sub4'])?>

<? php print render ($ page ['footer_sub1']); ?>

<? php print render ($ page ['footer_sub2']); ?>

<? php print render ($ page ['footer_sub3']); ?>

<? php print render ($ page ['footer_sub4']); ?>

<? php endif; ?>

Not sure if this is in your

Sam Moore

he/him

Sandy Hook, CT

commented 17 January 2016 at 15:38

Not sure if this is in your code or just a cut and paste error, but you seem to have extraneous word spaces after the $ (in your PHP) and the # (in your CSS).

The code you lifted from Bartik just checks to see if any of the objects exist before attempting to render them. This is generally a good idea, but doesn't really address your issue.

What's in those regions? if you have blocks in there, check the CSS for those - blocks by default are set to display:block, which probably isn't what you want.

============================
Resonetrics: Better Tools for Building Brands
http://resonetrics.com
http://technologyformarketers.com
http://kittenassociates.org
http://www.linkedin.com/in/sammooreatresonetrics

Thanks for the answer Sam.

WillyN commented 17 January 2016 at 20:56

Thanks for the answer Sam.
It is a copy / paste error I have not been aware of.
I am unsure what you mean by:
"blocks by default are set two display: block, which probably isn't what you want"

I try to make a footer with 4 horizont adjusted regions. In each of these can I place a views (block).
As they are, they are now horizontal and I have placed a views block in each of them.
Now the problem is that they are not responsive.
The blocks becomes smaller when the browser window is decreased.

UPS! I remember, now, that the regions do not have a dimension.
So of course they getting just smaller and smaller.
Do not know where I put the dimension of a region.
Or whether it is the solution.

I have searched and searched the Internet to find a guide to this particular theming solution. But can not find a guide from step 1 to the last step.
Do you know a step by step guide for the Zen theme, I will be grateful

You may have better luck in

Sam Moore

he/him

Sandy Hook, CT

commented 17 January 2016 at 21:13

You may have better luck in the Zen theme's project page (https://www.drupal.org/project/zen), handbook page (https://www.drupal.org/node/193318) where there are several links to videos and documentation, and the issue queue (https://www.drupal.org/project/issues/zen?categories=All - you can post a request for support there).
Meanwhile, you said

Now the problem is that they are not responsive.
The blocks becomes smaller when the browser window is decreased.

I'm not clear what you expected to happen - resizing is a pretty common behavior for elements in a responsive site.
If you want those regions to stack instead of resizing, you could set them to float and set a min-width on each one, for example, but without seeing your site I'm just fingerpainting.

I think it is needless to

WillyN commented 17 January 2016 at 21:19

I think it is needless to guide me here Sam.
There must happens something else before I understand the task.
So I have to wait until there is a good guide.
But many thanks for the help.
This has made me aware of I do not know much about ex. the difference between regions and blocks.