Jump to content

Rikki/Design: CSS helper classes for ipsGrid, mobile and tablet


Recommended Posts

Using .ipsGrid can be useful, but I find that I often have to add extra CSS because I find ipsGrid_collapsePhone or ipsGrid_collapseTablet to waste too much space. 

For example, I want to be able to say: I want this column to be 1/4 (ipsGrid_span3) on desktop, 1/3 (ipsGrid_span4) on tablet and 1/2 on mobile (ipsGrid_span6). 

An example of where you could utilize this yourself would be the staff page.

Currently I have CSS-rules like this: 

@media screen and (max-width: 979px) {
  #klikkfeedBottom .forumArticleFeed li.ipsGrid_span4 {
      width: 48.93617021276595%;

@media screen and (max-width: 767px) {
  .ipsApp .tekPopularForums .ipsGrid > .ipsGrid_span4 {
    width: 48.93617021276595%;

Which I feel is far from ideal in the long run.

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...