Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v4-alpha Card columns on small screens #17511

Closed
James1345 opened this issue Sep 7, 2015 · 7 comments
Closed

v4-alpha Card columns on small screens #17511

James1345 opened this issue Sep 7, 2015 · 7 comments
Labels
css docs v4
Milestone
v4.0.0-alpha.3

Comments

@James1345
Copy link

Using the card columns forces 3 columns to be created regardless of screen size. On smaller screens (e.g. xs, sm) this is not particularly useful. It would be desirable to be able to set different column numbers for different screen sizes easily without manually overriding the column-count property

Syntax example - matching the grid classes. This is merely my own personal proposal
card-columns-sm-1, card-columns-md-3
@hilquias
Copy link

+1

@dalezak
Copy link

dalezak commented Oct 27, 2015

Looks like the following can accomplish this, but it would be nice if it was built into V4.

.card-columns {
  @include media-breakpoint-up(xs) {
    &.card-columns-xs-1 {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
    }
    &.card-columns-xs-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    &.card-columns-xs-3 {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
    &.card-columns-xs-4 {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
  }
  @include media-breakpoint-up(sm) {
    &.card-columns-sm-1 {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
    }
    &.card-columns-sm-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    &.card-columns-sm-3 {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
    &.card-columns-sm-4 {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
  }
  @include media-breakpoint-up(md) {
    &.card-columns-md-1 {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
    }
    &.card-columns-md-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    &.card-columns-md-3 {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
    &.card-columns-md-4 {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
  }
  @include media-breakpoint-up(lg) {
    &.card-columns-lg-1 {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
    }
    &.card-columns-lg-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    &.card-columns-lg-3 {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
    &.card-columns-lg-4 {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
  }
}

@fabioroldan
Copy link


It works perfect !!! I already added in _card.scss and compile with Grunt. Thank you very much "@dalezak".

@gczh
Copy link

gczh commented Nov 11, 2015

👍 This should go up in the v4 docs!

@nextgenthemes
Copy link
Contributor

@dalezak There is no need for vendor prefixes, autoprefixer takes care of that.

@mdo mdo mentioned this issue Dec 8, 2015
Closed
8 tasks
@rjmoggach
Copy link

I'm using something like the following - some redundant code given autoprefixer will take care of prefixes but nonetheless current release wasn't working for me on chrome so I've left them in

@mixin card-columns($column-count, $column-gap) {
    -webkit-column-count: $column-count;
       -moz-column-count: $column-count;
         -o-column-count: $column-count;
        -ms-column-count: $column-count;
            column-count: $column-count;
    -webkit-column-gap: $column-gap;
       -moz-column-gap: $column-gap;
         -o-column-gap: $column-gap;
        -ms-column-gap: $column-gap;
            column-gap: $column-gap;
}

.card-columns {
    @include media-breakpoint-only(xs) {
        @include card-columns(1, 1.25rem);
    }
    @include media-breakpoint-only(sm) {
        @include card-columns(1, 1.25rem);
    }
    @include media-breakpoint-only(md) {
        @include card-columns(2, 1.25rem);
    }
    @include media-breakpoint-only(lg) {
        @include card-columns(4, 1.25rem);
    }
    @include media-breakpoint-only(xl) {
        @include card-columns(5, 1.25rem);
    }
    .card {
      display: inline-block;
      width: 100%; // Don't let them exceed the column width
    }
}

@mdo mdo added this to the v4.0.0-alpha.3 milestone May 12, 2016
@mdo mdo added docs and removed feature labels May 12, 2016
mdo added a commit that referenced this issue May 12, 2016
@mdo
Fix #17511 by adding mention to the docs for how to extend the card c…
e70f716 
…olumns
@mdo
Copy link
Member

mdo commented May 12, 2016

No plans to implement this wholesale, but I can see adding a mention to the docs for how it can be customized and extended. Coming in #19885.

@mdo mdo closed this as completed May 12, 2016
@MartijnCuppens MartijnCuppens mentioned this issue Jun 18, 2019
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css docs v4
Projects
None yet
Milestone
v4.0.0-alpha.3
Development

No branches or pull requests
9 participants
@dalezak @mdo @rjmoggach @cvrebert @hilquias @James1345 @nextgenthemes @gczh @fabioroldan