Semantic-ui: Changing width of card view

[arcticmatt]

Is there a way to change the width (or overall size) of semantic-ui cards?

I tried to change the @width variable in semantic/src/themes/default/views/card.variables from 290px to something else, but it does nothing.

[awgv]

Hi @arcticmatt, you shouldn’t be changing the default theme directly, there’s a special folder in src called site where you should be keeping your overrides. Open src/site/views/card.variables, put, say, @width: 400px; there, then rebuild the framework.

[arcticmatt]

Hi @Banandrew. I've also tried that (as well as src/site/views/card.overrides) to no avail. The only thing that seems to work is setting style="width:400px on the card directly. My code for the cards looks like this:

    <div class="ui three stackable cards">
      <a class="ui card" href="facebook-preview.html">
        <div class="image">
          <img src="assets/main/fbcanvas.png">
        </div>
        <div class="content">
          <div class="card header">Facebook Canvas</div>
          <div class="card description">
            Product design intern for the Canvas team, helping people create immersive storytelling experiences.
          </div>
        </div>
      </a>
      ... (2 more cards)
    </div>   

[awgv]

@arcticmatt That’s because .amount.cards calculates the width based on the .amount, which overrides @width. For example, .three.cards looks like so:

.ui.three.cards > .card {
  width: @threeCard;
  /*
    ~"calc("@threeColumn~" - "(@threeCardSpacing * 2)~")"
    Evaluates to “calc(33.33333333% - 2em)”
  */
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}

Setting fixed width for .amount.cards contradicts the purpose, so maybe it’d be better to use .ui.cards exactly, which will be using @width that you already set.

[arcticmatt]

@Banandrew gotcha, thanks a bunch!