No spacing between cards?

[robertandrews]

Seems like there is no spacing between cards, is that right?

I had spacing okay when I was using card deck - but I think I have to change because, apparently, Bootstrap 4 doesn't support responsive-column card decks.

So I'm looking at going back to cards that should be 3-wide at lg breakpoint. But, with Propeller enabled, there is no space between the cards. When I go back to plain Bootstrap, I get spacing.

My mark-up is something like this, but I am also sometimes laying more than two cards side-by-side...

<div class="container-fluid  cxt-bgimg     pt-4 pb-5 ">
  <div class="container pt-4 pb-5">

    Content here

    <div class="row ">

      <!-- card -->
      <div class="card pmd-card cxt-card-profile pmd-z-depth col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
        <!-- background color -->
        <div class="cxt-card-top cxt-bgimg" style="background-image:url('background.jpg')"></div>
        <!-- avatar -->
        <div class="cxt-avatar"><img src="avatar.jpg" class="rounded-circle img-responsive"></div>
        <div class="card-block">
          <h3 class="text-center">Name</h3>
        </div>
      </div> <!-- / end card -->
      <!-- card -->
      <div class="card pmd-card cxt-card-profile pmd-z-depth col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
        <!-- background color -->
        <div class="cxt-card-top cxt-bgimg" style="background-image:url('background.jpg')"></div>
        <!-- avatar -->
        <div class="cxt-avatar"><img src="avatar.jpg" class="rounded-circle img-responsive"></div>
        <div class="card-block">
          <h3 class="text-center">Name</h3>
        </div>
      </div> <!-- / end card -->

    </div>

</div>

[sunil-digicorp]

Hello, We looked into your markup and found the problem. You are facing no space problem between the cards because you are applying .colclasses and .card classes in the same div. We would suggest you to add card div inside.col class div. It will give you proper space (horizontally and vertically) between cards. For more clarity, please refer to the modified snippet below

<div class="container-fluid  cxt-bgimg     pt-4 pb-5">

  <div class="container pt-4 pb-5">

    Content here

    <div class="row ">
      <!-- card -->
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
      <div class="card pmd-card cxt-card-profile pmd-z-depth">
        <!-- background color -->
        <div class="cxt-card-top cxt-bgimg" style="background-image:url('background.jpg')"></div>
        <!-- avatar -->
        <div class="cxt-avatar"><img src="avatar.jpg" class="rounded-circle img-responsive"></div>
        <div class="card-block">
          <h3 class="text-center">Name</h3>
        </div>
      </div> <!-- / end card -->
      </div> <!-- / end col -->
      <!-- card -->
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
      <div class="card pmd-card cxt-card-profile pmd-z-depth">
        <!-- background color -->
        <div class="cxt-card-top cxt-bgimg" style="background-image:url('background.jpg')"></div>
        <!-- avatar -->
        <div class="cxt-avatar"><img src="avatar.jpg" class="rounded-circle img-responsive"></div>
        <div class="card-block">
          <h3 class="text-center">Name</h3>
        </div>
      </div> <!-- / end card -->
      </div> <!-- / end col -->

    </div>

</div>
</div>

Hope this will solve your purpose.

[robertandrews]

Correct, this is solved - thanks for your input.

[robertandrews]

This approach has left a side-effect: my adjacent cards are no longer forced to be the same height when the amount of content inside varies. Is this a flexbox thing? How can I match the height on cards to be the same as the tallest one?

[piyush-digicorp]

Hello,

No, it is not a flexbox thing.

We have purposely not given a fixed minimum height to the cards. Instead, we have used masonry jQuery http://masonry.desandro.com/ to adjust the cards according to their content. You can either give fixed min-height to your card (based on the height of your tallest card) or you can integrate this masonry in your template.

Hope this will solve your purpose.

...

[image: photo] Piyush Jain Product Designer, Propeller www.digi-corp.com http://twitter.com/piyush22072016 https://twitter.com/PropellerKit https://www.facebook.com/propeller.in/ [image: ] https://github.com/digicorp/propeller/

On Thu, Apr 20, 2017 at 2:59 PM, robertandrews notifications@github.com wrote:

This approach has left a side-effect: my adjacent cards are no longer forced to be the same height when the amount of content inside varies. Is this a flexbox thing? How can I match the height on cards to be the same as the tallest one?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/digicorp/propeller/issues/17#issuecomment-295650437, or mute the thread https://github.com/notifications/unsubscribe-auth/AV_HEVoFE-PXNnQXQ2jz7IBwX0Wj3YYlks5rxyWPgaJpZM4M5SnP .