Menu icon Foundation
Change column count depending on device orientation

Hi,

I would like to reduce the number of columns for certain elements when a device rotates from portrait to landscape, is there a way of doing this with scss, or do I need to set up a JS handler to listen for the change in orientation, and then replace the column classes on each element.

I would prefer an scss approach, my initial thought was to create a custom css class and then use @extend inside of breakpoint definitions in the css, but it looks like using @extend this way produces buggy css.

For example:

// This does not work
.custom-column {
    @include breakpoint(small only) {
        @include breakpoint(portrait) {
            @extend .small-5;
        }
        
        @include breakpoint(landscape) {
            @extend .small-3;
        }
    }
}

Any suggestions on the recommended approach would be greatly appreciated.

Thanks

Paul

scss columns

Hi,

I would like to reduce the number of columns for certain elements when a device rotates from portrait to landscape, is there a way of doing this with scss, or do I need to set up a JS handler to listen for the change in orientation, and then replace the column classes on each element.

I would prefer an scss approach, my initial thought was to create a custom css class and then use @extend inside of breakpoint definitions in the css, but it looks like using @extend this way produces buggy css.

For example:

// This does not work
.custom-column {
    @include breakpoint(small only) {
        @include breakpoint(portrait) {
            @extend .small-5;
        }
        
        @include breakpoint(landscape) {
            @extend .small-3;
        }
    }
}

Any suggestions on the recommended approach would be greatly appreciated.

Thanks

Paul

Paul Hollyer over 3 years ago

Correction: the above css does work, I think gulp isn't always compiling the css so need to keep an eye on it.

edit: No it doesn't, the css produced doesn't appear to honour the media queries so going with javascript.

Paul Hollyer over 3 years ago

For anyone finding this, the following javascript solves my specific scenario, hopefully this can help someone else.

 var updateColumns = function(breakpoint) {
  var elems = $('div[data-' + breakpoint + '-landscape]');
  var orientation = window.orientation;

  elems.each(function(index) {
    var target = $(this);
    var classes = target.attr('class').split(' ');

    for(var i = 0; i < classes.length; i++) {
      if(classes[i].match(/small/g)) {
        var targetClass = classes[i];
        var columnNum = targetClass.split('-')[1];

        switch(orientation) {
        case 'landscape':
        case -90:
        case 90:
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-landscape'));
          target.data(breakpoint + '-portrait',columnNum);
          break;
        case 'portrait':
        case 0:
        case 180:
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-portrait'))
          target.data(breakpoint + '-landscape',columnNum);
        }
      }
    }
  })
}

$(window).on('orientationchange', function(event) {
  updateColumns('small'); // choose the breakpoint to target
  updateColumns('medium'); // target as many breakpoints as you wish
});

updateColumns('small');
updateColumns('medium');

HTML

<div class='small-5 columns' data-small-landscape='3'>
...
</div>

HTH someones else.

Paul

Paul Hollyer over 3 years ago

Update:

 var updateColumns = function(breakpoint) {
  var elems = $('div[data-' + breakpoint + '-landscape]');

  elems.each(function(index) {
    var target = $(this);
    var classes = target.attr('class').split(' ');

    for(var i = 0; i < classes.length; i++) {
      if(classes[i].match(/small/g)) {
        var targetClass = classes[i];
        var columnNum = targetClass.split('-')[1];

        switch(getCurrentOrientation()) {
        case 'landscape':
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-landscape'));
          target.data(breakpoint + '-portrait',columnNum);
          break;
        case 'portrait':
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-portrait'))
          target.data(breakpoint + '-landscape',columnNum);
        }
      }
    }
  })
}

var getCurrentOrientation = function() {
  var orientation = 'portrait';

  switch(window.orientation) {
    case 'landscape':
    case -90:
    case 90:
      orientation = 'landscape';
  }

  return orientation;
}

$(window).on('orientationchange', function(event) {
  updateColumns('small');
});

if(getCurrentOrientation() == 'landscape') {
  updateColumns('small');
}