I have an Omega 3.0 page with a sidebar. In the main content area, I would like my listings of nodes to be displayed in 4 columns if the wide.css is used, 3 columns if normal.css is used, and 2 columns wide if I am in the narrow mode. What general approach would I take to doing this?

... is this just done just with css?

I want something like is found at http://colly.com/comments/carry_on_responsively/
... or, http://www.alistapart.com/articles/responsive-web-design/


#3 wide.png320.43 KBArgus
#3 Normal.png307.42 KBArgus
#3 Narrow.png323.5 KBArgus


kevin-bcr’s picture


A better way to describe what I want: Not columns, but a grid with the number of columns in the grid changing -- like a photo gallery, but in this case a "gallery" of node items.

kevin-bcr’s picture

OK. Here's what I have done. Does this seem correct?

In MYTHEME-alpha-default-normal.css ...

article.node-teaser {
    clear: none;
    float: left;
    height: 400px;
    padding-right: 5%;
    width: 45%;

In MYTHEME-alpha-default-wide.css ...

article.node-teaser {
    height: 450px;
    padding-right: 4.3%;
    width: 29%;

I had to set a height to make sure each new row was aligned.

My question concerns whether (1) this css makes sense and (2) whether there is some other module, etc., that would do the job better.


Argus’s picture

323.5 KB
307.42 KB
320.43 KB

Seems to be working fine the way you did it.