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

No spacing between cards? about propeller HOT 4 CLOSED

digicorp commented on May 30, 2024

No spacing between cards?

from propeller.

Comments (4)

sunil-digicorp commented on May 30, 2024

Hello,
We looked into your markup and found the problem. You are facing no space problem between the cards because you are applying .col classes 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.

from propeller.

robertandrews commented on May 30, 2024

Correct, this is solved - thanks for your input.

from propeller.

robertandrews commented on May 30, 2024

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?

from propeller.

piyush-digicorp commented on May 30, 2024

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 ***@***.***> 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 <#17 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AV_HEVoFE-PXNnQXQ2jz7IBwX0Wj3YYlks5rxyWPgaJpZM4M5SnP> .

from propeller.

No spacing between cards? about propeller HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent