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/

Kevin

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

Comments

kevin-bcr’s picture

kevin-bcr commented

Clarification:

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

kevin-bcr commented

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.

Kevin

Argus’s picture

Argus commented
StatusFileSize
new Narrow.png323.5 KB
new Normal.png307.42 KB
new wide.png320.43 KB

Seems to be working fine the way you did it.